🤔 hook? custom hook? 그게 뭔데?

React에서의 Hook은 무엇일까?

낚시터로 가볼까요?

Hook은 한국어로 고리, 낚싯바늘을 의미합니다.
만약 제가 낚시를 한다고 생각하였을때 낚시대를 준비해야하는것이 효율적일 것이고,
그 낚시대에는 고기를 낚기위한 낚싯바늘이 있겠죠?
그리고 그 낚싯바늘에 미끼를 걸고 기다리다보면 물고기가 그 미끼를 물고, 낚시바늘에 걸리고 맙니다.

Hook에 대해 알아보는데 왜 낚시터로 가나요?

( 개인적으로 이해하기 위해 작성한 예시입니다. 틀리거나 비유가 어색한 예시일수도 있습니다! )

• 낚시를 효율적으로 하기 위해서 낚시대를 준비합니다.
• 준비한 낚시대에는 낚싯바늘이 있습니다.
• 낚싯바늘에 미끼를 걸어 기다립니다.
• 물고기는 미끼를 물고, 낚시바늘에 걸립니다.

위 과정을 이렇게 바꾸어서 말해보겠습니다.

• 웹사이트를 효율적으로 만들기 위해서 React를 준비합니다.
• 준비한 React에는 hook이 있습니다.
• Hook을 만들고, 컴포넌트와 연결해 유저가 어떤 행동을 할때까지 기다립니다. (웹사이트 접속, 이동, 상호작용 등)
• 유저는 행동을 하고, hook이 실행됩니다.

그래서 Hook은..

개발자가 필요할 때, 혹은 사용하면 유용할 것 같을때 가져와 사용하는 일종의 낚싯바늘이라고 생각합니다.
물론 낚시바늘, 즉 hook이 필요가 없는 상황이라면 굳이 사용하지 않아도 되겠죠?

hook에 대한 정의는 아래와 같습니다.

React hook은 함수형 컴포넌트에서 상태관리, 라이프라이클 메서드 사용,
그 외 다른 React 기능들을 사용할 수 있게 해주는 함수입니다.
함수형 컴포넌트 내에서 hook을 사용하여 상태와 라이프사이클 메서드를 관리하고,
클래스 컴포넌트에서만 가능했던 작업들을 함수 컴포넌트에서도 수행할 수 있습니다.

useState, useReducer, useEffect, useContext, useRef 등
리액트는 기본적으로 내장되어있는 수많은 hook들을 제공합니다.
그런데도 왜 우리는 굳이 React가 만들어 둔 훅이 있는데 따로 custom hook을 만들어서 사용하려고할까요?

custom hook?

React는 useState, useContext, 그리고 useEffect같이 몇몇 내재하고 있는 Hook이 존재합니다.
가끔 조금 더 구체적인 목적을 가진 Hook이 존재하길 바랄 때도 있을 겁니다.
예를 들어, 데이터를 가져온다던가, 사용자가 온라인 상태인지 계속 확인한다던가, 혹은 채팅방에 연결하기 위한 목적들처럼요.
React에서 다음과 같은 Hook들을 찾기는 어려울 것입니다.
하지만 애플리케이션의 필요에 알맞은 본인만의 Hook을 만들 수 있습니다.

React Docs의 custom hook에 대한 개요입니다.
내재되어 있는 hook이 존재하지만,
조금 더 구체적인 목적을 가진 hook이 필요할 때 custom hook을 만들어서 사용한다!
라고 설명합니다.

예시로 보는 custom hook

만약 우리의 웹사이트에서 유저에게 네트워크 상태(인터넷의 상태)를 알려주고 싶을때,
아래와 같이 코드를 작성할 수 있습니다.

export default function HomePage() {
  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 (
    <div>
    	<h1>홈페이지입니다.<p>
	    <p>{isOnline ? '✅ 온라인' : '❌ 연결 안 됨'}<p>
    </div>);
}

위 예시는 만약 유저가 홈페이지에서 인터넷에 연결되어있지 않다면 '❌ 연결 안 됨'을 보여주고,
연결이 되어있다면 '✅ 온라인' 이라는 UI를 보여줍니다.

하지만 다른 페이지에서도 이 로직을 사용한다면 어떨까요?

export default function DetailPage() {
  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 (
    <div>
    	<h1>디테일 페이지입니다.<p>
	    <p>{isOnline ? '✅ 온라인' : '❌ 연결 안 됨'}<p>
    </div>);
}

만약 동일한 로직을 사용하고싶다면, 위와 같이 코드를 반복해서 사용해주는 방법도 있겠죠.
위의 두 페이지는 기능적으로도 잘 동작하고, 문제가 없어보입니다.
다만 아쉬운 점은 두 페이지의 로직이 중복되는 점이 아쉬운 점이겠죠.

여기까지 읽어보시면서 무언가 아쉬움이 있으셨다고 생각하신다면,
지금이 바로 custom hook을 적용시킬 타이밍입니다!
순차적으로 중복되는 로직을 custom hook으로 바꾸는 과정을 진행해볼까요?

1. 위 예시 페이지들의 동일한 로직 알아내기

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);
  };
}, []);

다시 코드를 살펴보면, 위 로직이 정확히 동일하다는 것을 알 수 있습니다.
그리고 또한, 사용하는 state도 isOnline 으로 동일하죠!

2. custom hook 만들어주기

// useOnlineStatus.js
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;
}

자, 위에서 동일한 로직을 파악하고, 동일하게 사용되는 state인 isOnline을 반환해주는 custom hook을 만들었습니다.

3. custom hook 사용해주기

export default function HomePage() {
  const isOnline = useOnlineStatus();

  return (
    <div>
    	<h1>홈페이지입니다.<p>
	    <p>{isOnline ? '✅ 온라인' : '❌ 연결 안 됨'}<p>
    </div>);
}

export default function DetailPage() {
  const isOnline = useOnlineStatus();

  return (
    <div>
    	<h1>디테일 페이지입니다.<p>
	    <p>{isOnline ? '✅ 온라인' : '❌ 연결 안 됨'}<p>
    </div>);
}

어떤가요? 코드가 짧아져 가독성이 올라가지 않았나요?
이제 두 페이지는 반복되는 로직이 거의 사라졌습니다.
중요한 점은,
두 페이지의 내부 코드가 어떻게 그것을 하는지보다
그 페이지들이 무엇을 하려는지에 대해 작성을 했다는 점입니다.

custom hook을 만들어 로직을 재사용하면
브라우저 API나 외부 시스템(서버)과 소통하는 코드에 대해 불필요한 세부 사항을 숨길 수 있습니다.

custom hook을 사용하였을때의 장점

위에서 설명했듯이, custom hook을 사용하는 컴포넌트에서는
내부 코드가 어떻게 그것을 하는지 가 아닌,
그 컴포넌트가 해당 custom hook을 가지고 무엇을 하려는지에 대해서만 신경을 쓰면되니
서로의 관심사를 분리해 가독성과 유지보수성이 올라갑니다!

custom hook을 사용할때의 주의사항

모든 hook의 이름은 use 뒤의 대문자로 시작해야 합니다.
Ex. useCustomHook 와 같이 사용합니다!