[React] Custom Hook 이란?

Custom Hook

개요

React에서 커스텀 훅(Custom Hook)은 상태 로직을 재사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다.

💡 반복되는 로직을 리액트 내장 훅 들을 사용하여 개발자가 직접 만든 훅이라고 생각하면 된다.

사용이유

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

준수해야할 사항

커스텀훅 네이밍을 use... 형태로 작성해야 한다.

• 이를 따르지 않으면 특정한 함수가 그 안에서 Hook을 호출하는지를 알 수 없기 때문에 Hook 규칙의 위반 여부를 자동으로 체크할 수 없다.

사용방법

// useFetch.ts
import { useState, useEffect } from 'react';

export const useFetch = (baseUrl: string, initType: string) => {
  const [data, setData] = useState(null);
  
  const fetchUrl = (type: string) => {
    fetch(baseUrl + '/' + type)
    .then((res) => res.json())
    .then((res) => setData(res));
  };
  
  useEffect(() => {
    fetchUrl(initType);
  }, []);
  
  return {
    data,
    fetchUrl
  };
};

// App.ts
import { useFetch } from './useFetch';
import * as S from './style';

const baseUrl = 'https://velog.io/@jae2636';

const App = () => {
  const { data } = useFetch(baseUrl, 'typeValue');
  
  return (
    <S.Container>
    	// ...
    </S.Container>
  );
};
export default App;