기존에 소개드린 useState, useEffect, useCallbak, useRef, useMemo, useReducer는 리액트에서 제공하는 기본적인 Hooks였습니다. 이들만 이용해도 편리하게 리액트 앱을 개발할 수 있습니다.

거기에 더해서 리액트에서는 반복되는 로직을 사용자가 직접 Hooks로 만들어서 사용할 수 있는 Custom Hooks 기능을 제공하고 있습니다. 사용자는 Custom Hooks를 정의해서 반복 작업을 줄이고, 코드 재사용성을 높이는 등의 효과를 얻을 수 있습니다.

---

Custom Hooks 만들기

버튼을 누르면 boolean state가 토글되고, 그 상태를 출력하는 컴포넌트가 있습니다.

//CustomHook.jsx
import {useState} from 'react';

const CustomHook = () => {
  const [flag, setFlag] = useState(true);

  const handleFlag = () => {
    setFlag(!flag);
  }

  return (
    <>
      <h2>{flag + ''}</h2>
      <button onClick={handleFlag}>toggle</button>
    </>
  );
};

export default CustomHook;

이때 이 컴포넌트가 커지거나, 토글하는 부분이 다른 컴포넌트에서도 사용된다고 하면 다음 코드 부분이 반복되게 됩니다.

  const [flag, setFlag] = useState(true);

  const handleFlag = () => {
    setFlag(!flag);
  }

지금이야 예시로 간단한 내용을 들어서 반복되어도 별 문제가 없을 것같지만 복잡한 컴포넌트 로직의 경우에는 상당히 골치아프겠죠?

그래서 재사용성과 가독성을 위해 위 코드 부분을 Custom Hook으로 분리해보겠습니다.

이때 Custom Hook의 이름은 use~로 시작해야합니다.

useToggle이라는 이름의 Custom Hook을 만들어줍니다.

//useToggle
import {useState} from 'react';

const useToggle = initialState => {
  const [flag, setFlag] = useState(initialState);
  const handleFlagToggle = () => setFlag(!flag);

  return [flag, handleFlagToggle];
};

export default useToggle;

그리고 사용하고자하는 컴포넌트에서는 기존 Hooks를 사용하듯이 가져옵니다.

//CustomHook.jsx
import useToggle from './useToggle';

const CustomHook = () => {
  const [flag, setFlag] = useToggle(true);

  return (
    <>
      <h2>{flag + ''}</h2>
      <button onClick={setFlag}>toggle</button>
    </>
  );
};

export default CustomHook;

어때요 코드가 확 간결해졌죠?

그동안 배운 Hooks도 그랬지만 Custom Hook또한 array []나 object {}를 return해야합니다. 값이 하나라도 반드시 배열 또는 객체에 담아서 반환해주세요. 위 예시에선 배열의 형태를 return했습니다.

//App.js
import React from 'react';
import CustomHook from './codes/CustomHook';

function App() {
    return (
      <>
        <CustomHook/>
      </>
    );
}

export default App;