[React] Custom Hook 사용하기 + useOutsideClick

🤔 Custom Hook?

Custom Hook은 이름이 use로 시작하는 자바스크립트 함수이다.
Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 다음과 같이 분리하여 사용할 수 있다.
자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다는 장점이 있다.

이번 2차프로젝트 진행 중 custom hook을 사용해보았다(!) (배운 것은 바로바로 써먹자)

해결해야할 문제

1. 위에 카테고리, 클래스진행방식, 지역, 일정(이들을 title이라고 부르겠음) 그리고 그 안의 체크박스 형식으로 리스트가 포함된 filterDOM이 있다.
   (filterDOM = title 과 contents)
2. title 클릭시 해당 리스트가 나와야하고 filterDOM의 바깥 부분을 클릭했을 시 리스트가 없어져야 한다.

custom hook을 활용하여 문제 해결하기

👉 이를 해결하고자 생각했던 방식이 외부의 click을 감지하는 useOutsideClick을 활용하는 것이다. 구글링해서 알아냈다.

참고 자료 : https://chakra-ui.com/docs/styled-system/utility-hooks/use-outside-click

https://developer.mozilla.org/ko/docs/Web/API/Node/contains

  useOutsideClick(filterDom, () => setIsContentsShowed(false));


 <FilterList ref={filterDom}>
 // 코드생략
 </FilterList>


const useOutsideClick = (ref, handler) => {
  useEffect(() => {
    const listener = event => {
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);
    return () => {
      document.removeEventListener('mousedown', listener);
    };
  }, [ref, handler]);
};

setIsContentsShowed 는 contents(체크박스 리스트)를 보여줄지를 결정해주는 상태함수이다.

useOutSideClick hook을 활용하여 filterDom의 바깥 지점이 클릭 되었을 때 이를 감지하고, isContentsShowed의 값을 false로 만들어주는 로직이다. (두번째 인자에 클릭이 일어났을 때의 동작을 적어준다.)

훅을 사용함으로써, 다른 사람들이 이 훅의 이름을 보고서, 이게 무슨 로직인지를 대략 추측을 할 수가 있다. (가독성이 훨씬 좋아짐!)

또한 커스텀 Hook 을 만들어서 사용하면 컴포넌트의 로직을 분리시켜서 필요 할 때 쉽게 재사용 할 수도 있다(!)

🍯 마무리

반복되는 로직은 꼭 컴포넌트화 or 커스텀 훅으로 만들어주자-!
최대한 반복은 피하자-!