🕛 커스텀 훅이란?

리액트는 제공해주지 않지만, 개발을 진행할 때 개인적으로 'hook'으로 만들면 더 편하겠다고 느낄 때, 자신만의 hook으로 만드는 것을 의미한다.
즉, 같은 로직이 반복될 때 두 로직을 나누어서 작성하는 게 가능할지라도, 굉장히 비효율적이다. 이러한 로직을 하나의 커스텀훅 으로 따로 정의하여 비효율성을 낮출 수 있다.
커스텀 훅은 컴포넌트 분할과는 달리, 컴포넌트 로직 자체를 분할 + 재사용 할 수 있게 하는 것이다.

🕐 custom hook 규칙

1. use로 시작해야 한다.

   리액트에서 hook들은 모두 use로 시작하는 것이 원칙이고, custom hook 또한 예외가 될 수 없다. use뒤 대문자로 시작하는 것 또한 지켜주어야 한다.
   따라서 커스텀훅이 아닌 일반 함수를 정의할 때에는 use로 시작하는 것을 지양해주어야 한다.

2. state 자체가 아닌 state 저장 논리를 공유하는 것

   hook에 대한 각 호출은 동일한 hook에 대해 모든 호출이 독립적이다.
   즉, 같은 hook이 연이어 호출되었다고 해도 서로의 기능에는 영향을 미치지 않는다.
   한마디로 잘 작동한다. 모두 독립적인 로직 자체만을 공유하는 것이기 때문!

3. custom hook은 순수 함수로 기대된다.

   custom hook은 컴포넌트가 리렌더링되면 함께 리렌더링이 된다.
   커스텀 훅은 늘 최신의 props와 state를 받기 때문이다.

4. 최상위에서만, React 함수 내에서만 호출해야 한다.

   

리액트에서는 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되어야 한다라고 말한다. 즉, hook을 조건문이나 일반 함수(Js)에서 사용하게 되면, 컴포넌트가 렌더링 될 떄마다 항상 동일한 순서로 호출이 보장되는 것의 약속을 깨지는 결과가 일어난다.

5. customHook에 함수 넘겨주기

   함수를 custom hook에게 넘겨주는 형태로 변환할 수 있다.
   예시 코드로 살펴보자

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

위의 코드에서 showNotification 부분을 컴포넌트의 로직으로 바꾸고 싶다면?

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('New message: ' + msg);
    }
  });
  // ...

컴포넌트에 로직을 심고, 이후

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}

위와 같이 커스텀 훅으로 넘겨줄 수 있다.

하지만, 위와 같은 코드는 onReceiveMessage 에 deps를 추가했기 때문에, 컴포넌트가 리렌더링 될 때마다, 계속해서 커스텀훅또한 리렌더링될 것이다.

그렇다면 어떻게 해결할까?
useEffectEvent 를 통해 해결 가능하다.

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
}

이렇게 코드를 수정하면, 컴포넌트가 리렌더링되어도, 커스텀 훅에는 영향을 끼치지 못한다.

🕑 언제 사용할까?

모든 로직이 겹친다고 하나하나 커스텀 훅으로 뺄 필요는 없다.
그렇지만, Effect에 관한 부분이 있다면, 커스텀훅으로 감싸주는 것이 더 낫다.
Effect를 남용해서는 안되기 때문,,,
커스텀 훅으로 감쌀 때, 더욱 명확하게 결과를 보여주는 경우가 있다.

🤍 예시로 살펴보자 🤍

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // This Effect fetches cities for a country
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // This Effect fetches areas for the selected city
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

-> 위 코드의 겹치는 부분을 커스텀 훅으로 만들 수 있다.

다음 예시를 살펴보자

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

-> 겹치는 Effect를 custom hook으로 만든 예시이다. 이는 컴포넌트에서 다음과 같이 불려올 수 있다.

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

이에 따라, useEffect를 그냥 쓰는 것보다 훨씬 간단하고 효과적으로 data fetching을 완료 할 수 있다. (그치만, useEffect 써도 막 크게 문제되는 건 없긴 함,,,)

🕒 Custom Hook 장점

1. Effect와 데이터 흐름을 명확하게 만들 수 있다.
2. 컴포넌트가 자신의 역할에 집중할 수 있다.
3. 리액트가 새로운 기능을 추가했을 시, 컴포넌트 요소를 바꾸지 않고도 해당 effect를 제거할 수 있다.

   🕓 Custom Hook 만들어 보자

   
   -> 몇 가지 체크 박스가 있고 모두 체크 되었을 경우, 다음으로 넘어가는 기능을 첨가해 만들 것이다. 현재는 두 개만 체크되어 있기 때문에 비활성화가 된 상태이며, 체크 박스를 모두 눌러야만 활성화가 된다. 그렇다면 코드로 이를 구현해보자.

const labels = ['check 1', 'check 2', 'check 3']
 
const App: React.FunctionComponent = () => {
  const [checkList, setCheckList] = useState([false, false, false])
 
  // index 번째 체크 상태를 반전시킨다
  const handleCheckClick = (index: number) => {
    setCheckList((checks) => checks.map((c, i) => (i === index ? !c : c)))
  }
 
  const isAllChecked = checkList.every((x) => x)
 
  return (
    <div>
      <ul>
        {labels.map((label, idx) => (
          <li key={idx}>
            <label>
              <input
                type='checkbox'
                checked={checkList[idx]}
                onClick={() => handleCheckClick(idx)}
              />
              {label}
            </label>
          </li>
        ))}
      </ul>
      <p>
        <button disabled={!isAllChecked}>다음</button>
      </p>
    </div>
  )
} 

-> useState를 이용해서 checkList라는 상태 변수를 선언(boolean 배열)하고, 요소들을 체크 박스에 하나씩 대응한다. 이때, 체크박스가 나열된 부분을 컴포넌트로 분할하면 다음과 같다.

type Props = {
  checkList: readonly boolean[]
  labels: readonly string[]
  onCheck: (index: number) => void
}
 
export const Checks: React.FunctionComponent<Props> = ({
  checkList,
  labels,
  onCheck
}) => {
  return (
    <ul>
      {labels.map((label, idx) => (
        <li key={idx}>
          <label>
            <input
              type='checkbox'
              checked={checkList[idx]}
              onClick={() => onCheck(idx)}
            />
            {label}
          </label>
        </li>
      ))}
    </ul>
  )
} 

이 컴포넌트를 사용해보자.

const labels = ['check 1', 'check 2', 'check 3']
 
const App: React.FunctionComponent = () => {
  const [checkList, setCheckList] = useState([false, false, false])
 
  // index 번째 체크 상태를 반전시킨다
  const handleCheckClick = (index: number) => {
    setCheckList((checks) => checks.map((c, i) => (i === index ? !c : c)))
  }
 
  const isAllChecked = checkList.every((x) => x)
 
  return (
    <div>
      <Checks
        checkList={checkList}
        labels={labels}
        onCheck={handleCheckClick}
      />
      <p>
        <button disabled={!isAllChecked}>다음</button>
      </p>
    </div>
  )
} 

이와 같은 부분에서, App 컴포넌트는 현재도 여전히,
1. 상태변수인 checkList
2. 이벤트 핸들러인 handleCheckClick
3. isAllCheck 계산하는 로직
4. UI 보여주기
네 개의 기능이 남아 있다.
이때 App 컴포넌트는 모두 체크되었는지? 에만 관심이 있고,
무엇이 체크되었는지는 App이 소관하는 영역이 아니다.

이런 부분에서 커스텀 훅을 등장시켜 보자

type UseChecksResult = [boolean, () => JSX.Element]
 
export const useChecks = (labels: readonly string[]): UseChecksResult => {
  const [checkList, setCheckList] = useState(() => labels.map(() => false))
 
  const handleCheckClick = (index: number) => {
    setCheckList((checks) => checks.map((c, i) => (i === index ? !c : c)))
  }
 
  const isAllChecked = checkList.every((x) => x)
 
  const renderChecks = () => (
    <Checks checkList={checkList} labels={labels} onCheck={handleCheckClick} />
  )
 
  return [isAllChecked, renderChecks]
} 

useChecks라는 훅을 정의했는데, 이는 체크 박스(string[])를 받아와서 체크 박스를 관리하는 로직을 내포하고 있다.
반환값으로는 모두 체크 되었는지? 와 체크박스를 렌더링하는 함수가 있다.

이를 적용하면 다음과 같다.

const App: React.FunctionComponent = () => {
  const [isAllChecked, renderChecks] = useChecks(labels)
 
  return (
    <div>
      {renderChecks()}
      <p>
        <button disabled={!isAllChecked}>다음</button>
      </p>
    </div>
  )
} 

출처

라인
리액트공식문서