Hook을 커스터마이징 하기!

개인적으로 custom hook을 사용하면서 큰 장점은 딱 2가지였다.

1. 코드의 가독성을 높여준다.

2. 컴포넌트 재사용성 보다 다른 차원의 재사용

useEffect, useState와 같은 hooks를 직접 만들 수 있다고?
처음 custom hook을 접했을 때는 선뜻 그렇구나! 하며 사용할 수 없었다.
조금 어려웠기 때문이다. 지금은 state가 3개 이상 생기면 바로 custom hook으로 빼내 재사용한다.

---

⛳ custom hook 만들기

기업협업 시리즈에서 2번 정도 custom hook에 대해 언급한 적이 있다.
usePolygon
useFilter
참고!

먼저 src 폴더 내부에 hooks 폴더를 생성한다.

hooks 폴더에 custom hooks를 작성하면 된다.

useFilter.js 파일을 보면 필터링을 위해 작성된 코드이다.

해당 코드들은 사실 Header.js에 작성되어도 된다. 하지만 하나의 컴포넌트 안에 복잡하고 길어지는 코드가 작성되어 있다면 가독성이 떨어지게 된다.

추후 useFilter hook을 다른 컴포넌트에도 사용할 수 있다.

---

⛳ 작성법

컴포넌트 생성하는 방법과 동일하다!

다른 점은 마지막 return문에서 작성한 함수 및 변수등을 return하면 도니다.

//useFilter.js

import { useSearchParams, useLocation } from 'react-router-dom';

const useFilter = () => {
  const location = useLocation();
  const [searchParams, setSearchParams] = useSearchParams();

  const sortStore = storeName => { };

  const sortApplication = appName => { };

  const showAllStoreData = () => {  };

  const showAllAppData = () => {  };
  
  
  return { sortStore, sortApplication, showAllStoreData, showAllAppData };
};

export default useFilter;

---

⛳ 사용법

useFilter를 사용할 곳에 import한 후 구조분해할당으로 선언하면 끝!

return 문 안에서 자유롭게 위의 filter 함수들을 사용할 수 있다.

//Header.js

import useFilter from '../../hooks/useFilter';

const Header = () => {

  const { sortStore, sortApplication, showAllAppData, showAllStoreData } =
    useFilter();

 return ()
  
} 

---