custom hook

7/6 수 - 3일차: 새로운 프로젝트 브리핑 - 영화 검색 사이트

멘토님이 새로운 프로젝트에 적용할 수 있는 fetch module 구현을 시연하였다.
흥미로운 것은 데이터 펫칭 모듈에 custom hook 을 추가하여 구현한 부분이었다.

custom hook:

• react에 내장된 기능들 (훅)을 적절히 조합하여 재사용이 가능한 훅을 만들 수 있다.
• 이번에 적용해 본 소감은 만약 여러 컴포넌트에서 비슷한 패턴의 state 및 state 변경에 관련한 함수가 있다면 훅으로 만들어 쓰는 것이 코드를 줄이는 데에 효과적이라는 것이다.

예시:

custom hook 정의 - useMovieModel.js 일부

const useMovieModel = () => {
  const [movies, setMovies] = useState([]);
  
  const getMoviesCallback = (response) => {
    response.data.page === 1 ? setMovies(response.data?.results) : setMovies([...movies, ...response.data?.results]);
    return response;
  };
  
    const getMovies = (pageNo = 1) => {
    return movieDataService.get(`/movie/popular?page=${pageNo}`, (response) => {
      getMoviesCallback(response);
    });
  };
  
    return {
    movies,
    getMovies
  };
 }

사용 - main.jsx

function Main() {
  const { movies, getMovies } = useMovieModel();
  const [pageNo, setPageNo] = useState(1);

  useEffect(() => {
    setIsDataLoaded(false);
    getMovies(pageNo)
  }, [pageNo]);

  return (
    <>
      <Contents movies={movies} />
    </>
  );
}

위의 훅은 영화 데이터를 필요로 하는 모든 컴퍼넌트에서 사용 가능하다. 추후 getMovieById(), searchMovies() 등의 영화 데이터를 받아오는데 관련한 다른 함수도 위 훅에 추가하였다.