[커스텀 훅] 수납장으로 훅 정리하기 #리액트 2차 개인과제 리팩토링

간단한 과제 소개

• 포켓몬 데이터 목록을 이용하여 나만의 포켓몬을 추가/삭제할 수 있다. 
• 포켓몬 상세 정보를 확인할 수 있다.

---

이번 리팩토링은 컴포넌트에서 작업할때 훅 관련 로직이 자꾸 눈에 밟혀 훅 전용 수납장으로 치우기로 했다. 새로 만든 커스텀 훅을 어딘가에서 재사용될까 싶긴 하지만 그냥 해봤다는 것에 의미를 두기로 했다.   커스텀 훅이란 각종 리액트 훅들을 취향대로 정의해놓고 사용하는 것이다. . . (블로그 홍보하기)

 

그래서 무슨 훅을 만들었냐면 저기 위에 포켓볼 사진 있는 곳이 대시보드 영역인데 `overflow-scroll` 속성을 줘서 안보이는 부분까지 가로로 요소들이 꽉 들어가 있다. 그리고 마우스 휠로 가로 스크롤을 구현하고자 `useRef` , `useEffect` 를 사용했는데 별 기능이 아닌데도 코드가 길어짐에 따라 분리하기로 했다.

 

 

💡 기존 코드

const Dashboard = () => {

  const dashboardRef = useRef(null);

  useEffect(() => {
    const handleWheel = (event) => { /* 핸들 이벤트 핸들러 어쩌구 */ };

    const element = dashboardRef.current;
    /* element에 이벤트 리스너 추가 어쩌구 */

    return () => { /* 언마운트될 때 이벤트 리스터 삭제 어쩌구 ..*/ };
  }, []);

  /* 밑에 또 다른 지저분한 로직들 어쩌구 .. */

📍 문제점

눈에 거슬린다(진짜 이게 문제여서 변경했음). 좀 더 제대로 말해보자면 가로 스크롤 이벤트는 한 번 정의해둔 이후 웬만하면 다시 볼 일 없을텐데 `Dashboard` 컴포넌트에서 작업할 때마다 상단에 저 코드들이 보이는게 너무 거슬렸다. 그래서 변경했다. (+ 학습겸)

 

 

💡 변경 코드

// useWheel.js
const useWheel = () => {
  const ref = useRef(null);
  
  useEffect(() => { /* 이하 생략 */ };
  }, []);
  return ref;
}

export default useWheel;

// Dashboard.jsx
const dashboardRef = useWheel();

`useEffect` 는 ref에 wheel 이벤트만 주면 되는 친구였다. 따라서 진짜 필요한데이터는 이벤트 핸들이 반영된 `ref`이다. 따라서 `ref` 만 반환 받아서 사용하면 된다. 

 

📍 변경 목적

마음이 편한해지고자 변경했다. `useEffect` 같은 건 이제 눈에 보일 필요가 없으니 커스텀 훅 안에서 잘 지냈으면 좋겠다. 그리고 가로 스크롤이 필요한 다른 기능이 생기면 또 쓸 수 있지 않을까 하는 기대감이 생겼다. 하지만 간단한 프로젝트기 때문에 생기지는 않을 것 같다. 

---

💡 정리

정리를 도와주는 수납장, 서랍같은 커스텀 훅을 공짜로 쓰면 마음이 편안해 진다.