리액트 커스텀 훅 만들기

Custom Hooks?

컴포넌트를 만들다 보면 반복되는 로직이 자주 발생된다. 따라서 custom hooks를 만들어서 반복되는 로직을 쉽게 재활용 할 수 있다.

Custom Hooks는 "use"라는 단어로 시작한다. (ex: useFetch)

useFetch 만들기

기존에 사용했던 fetch는 아래처럼 모든 component에 사용해야했다.

  const [sources, setSources] = useState([]);

  useEffect(() => {
    fetch('data/movieCarouselData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setSources(data);
      });
  }, []);

하지만 custom hooks를 사용하면 모든 component에 재사용이 가능하다.

1. src 디렉터리에 hooks라는 디렉터리를 만들고 useFetch.js 파일을 생성한다.
2. 아래의 코드를 넣어준다.

useFetch.js

import { useState, useEffect } from 'react';

const useFetch = url => {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setData(data))
  }, [url]);
  
  return [data];
};

export default useFetch;

1. 실제 적용해야할 컴포넌트에서 위의 useFetch를 불러오면 된다.

...
import useFetch from '../../../hooks/useFetch';
...
const [sources] = useFetch('data/movieCarouselData.json');
...
  return (
...    
        {sources &&
          sources.map((source, index) => (
            <div key={index}>
              <MovieCarousel source={source} />
            </div>
          ))}
...
  );
};

...

여기서 sources는 useFetch에서 사용되었던 data 변수이며 useFetch 가로안에 있는 url을 입력해주면 된다.

return안에서 기존에는 sources.map 만 넣었으면 되나 custom hooks를 사용하면 sources && sources.map 으로 진행해야 한다.

custom hooks의 장점

• 구성 요소가 초기화될 때마다 useEffect가 호출되고 해당 가져오기 기능 내부에서 URL이 HTTP 요청을 할 것으로 예상합니다.
• 성공 및 오류 처리가 모두 한 곳에서 처리됩니다.
• 응답이 수신되면 데이터를 로컬 변수에 저장하고 반환합니다.

해당 useFetch는 단일 데이터를 받아올 때 사용이 가능하며 추후 axios를 적용해야 error도 잡아 낼 수 있는 방법이 있다고 한다.

참고 및 출처
https://towardsdev.com/react-custom-hook-fetch-cf764f717b88
https://react.vlpt.us/basic/21-custom-hook.html
https://www.w3schools.com/react/react_customhooks.asp

React Custom Hooks

21. 커스텀 Hooks 만들기 · GitBook

React Custom Hook : useFetch()