[React18] 14. Custom Hook

 

React는 useState, useContext, useEffect와 같은 몇 가지 빌트인 훅이 있습니다. 구체적인 목적을 가진 Hook이 필요할 때가 있습니다. 컴포넌트로부터 Custom Hook을 추출하면 컴포넌트를 단순화할 수 있고, 둘 간의 중복을 제거할 수 있습니다.

 

Custom Hook을 만들면 컴포넌트 내부 코드가 어떻게 하는지보다 Custom Hook으로 무엇을 하려는지가 명확하게 됩니다. 또한 브라우저 API나 외부 시스템과 소통하는 방밥과 같은 불필요한 세부 사항을 숨길 수 있습니다. 즉, 컴포넌트의 코드는 목적만을 나타낼 뿐 실행 방법에 대해서는 나타내지 않습니다.

 

** Custom Hook을 만들 때 훅의 이름은 언제나 use로 시작해야 하고 그다음의 첫 글자는 대문자여야 합니다. 이런 규칙들은 컴포넌트를 볼 때, 어디에 state, Effect 및 다른 React 기능들이 숨어 있는지 알 수 있게 해 줍니다. 

 

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

 

import { useOnlineStatus } from './useOnlineStatus.js';

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? 'Online' : 'Disconnected'}</h1>;
}

 

Custom Hook은 state 그 자체를 공유하는 게 아닌 state 저장 로직을 공유하도록 합니다. 같은 Hook을 호출하더라도 각각의 Hook 호출은 완전히 독립되어 있습니다. 즉, 컴포넌트에 하나의 값이 공유하는 것이 아니라 개별로 존재합니다. 

 

** 컴포넌트를 다시 렌더링 할 때마다 Custom Hook 내부의 코드가 다시 실행됩니다. 이것이 컴포넌트와 마찬가지로 커스텀 훅도 순수해야 하는 이유입니다. 

 

중복되는 모든 코드에 대해 커스텀 훅을 추출할 필요는 없습니다. 하지만 Effect를 작성할 때마다 커스텀 훅으로 감싸는 것이 더 명확할지 고려하는 것이 좋습니다. 외부 시스템과 동기화하거나 React에 빌트인 API를 위해 무언가를 위한 작업은 “React에 벗어나기”는 위함입니다. Custom Hook으로 감싸는 것은 목적을 정확하게 전달하고 어떻게 데이터가 그것을 통해 흐르는지 알 수 있게 해 줍니다.

 

커스텀 Hook으로 Effect를 감싸는 것이 종종 유용한 이유는 다음과 같습니다.

1. 매우 명확하게 Effect로 주고받는 데이터 흐름을 만들 때
2. 컴포넌트가 Effect의 정확한 실행보다 목적에 집중하도록 할 때
3. React가 새 기능을 추가할 때, 다른 컴포넌트의 변경 없이 이 Effect를 삭제할 수 있을 때

 

---

 

** React18 공식 문서 보고 정리한 내용입니다.

https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/reusing-logic-with-custom-hooks

커스텀 Hook으로 로직 재사용하기 – React