[React] Custom Hook 이란?

1. Custom Hook이란?

커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다.

2. Custom Hook, 왜 사용할까?

앞서 말했듯이 커스텀 훅은 리액트에서 컴포넌트를 만드는 과정을 생각하면 된다.

• 코드, 로직의 간결해지고 가독성이 좋아진다
• 필요없는 반복을 줄이고 재사용성을 높인다
• 수정사항이 있을 시 커스텀 훅에서만 수정하면 되기 때문에 유지보수에 용이하다

3. Custom Hook 작성 시 지켜야 할 것

리액트 내장훅과 마찬가지로 커스텀 훅의 이름은 use로 시작해야된다.

4. 사용 예제 코드

커스텀 훅을 이용하여 API를 호출하는 로직을 작성, fetch함수 부분을 커스텀 훅으로 만들어본다.

1) hooks라는 폴더를 만들어 커스텀 훅을 관리한다
2) 커스텀 훅을 만들 로직을 뽑아내어 작성, hook을 만든다
3) useEffect가 실행되면서 App에서 보낸 url을 useState의 value가 받는다
4) value를 리턴한다: 커스텀훅은 JSX가 아닌 배열 또는 오브젝트를 리턴한다

🍕 custom hook 사용 전

function App() {
  const [user, setUser] = useState([]);
  const url = 'https//하나둘셋넷다섯';
  
  useEffect(() => {
    fetch(url)
     .then(res => res.json())
     .then(res => setUser(res))
  }, [])

🍕 custom hook 만들기

function useFetch(url) {
  const [value, setValue] = useState([]);
  
  useEffect(() => {
    fetch(url)
     .then(res => res.json())
     .then(res => setValue(res))
  }, [url])
  
  return value
}

🍕 custom hook 적용하기

import useFetch from './hooks/useFetch';

function App() {
  const user = useFetch('https://하나둘셋넷다섯');
  
  return (
    //JSX
    );
};

export default App;

참고자료:
https://ko-de-dev-green.tistory.com/71