리액트에서 커스텀 훅을 사용해야 하는 이유

오늘은 리액트 공식문서의 커스텀 훅과 관련된 내용을 자세히 다루어보려고 합니다. 커스텀 훅을 통해 필요한 로직을 재사용하고 코드를 보다 효율적으로 구현할 수 있습니다.

 

해당 내용에 대해 더 깊이있게 알아보고 싶으신 분들은 아래 리액트 공식문서의 custom hook 부분을 참고해보세요.

 

Reusing Logic with Custom Hooks – React

 

기본 훅 (useState, useEffect 등)과 커스텀 훅의 차이점

React의 기본 훅은 useState, useEffect, useContext와 같이 React 라이브러리에 내장되어 있는 함수들로, 상태 관리, 라이프 사이클 이벤트 처리, 컨텍스트 관리 등 애플리케이션의 기본적인 기능을 수행합니다. 이들은 React 개발에 필수적인 요소이며, 모든 React 컴포넌트에서 공통적으로 사용됩니다.

 

반면, 커스텀 훅은 개발자가 특정 기능을 컴포넌트 간에 재사용할 수 있도록 자신만의 로직을 묶어서 만든 훅입니다. 커스텀 훅은 기본 훅을 조합하고 확장하여 새로운 기능을 생성할 수 있게 해주며, 이를 통해 애플리케이션의 유지 보수성을 향상시키고 코드 중복을 줄일 수 있습니다. 예를 들어, 데이터를 패칭하는 로직이 여러 컴포넌트에서 반복될 경우, 이를 useDataFetcher라는 커스텀 훅으로 추출하면, 간결하고 일관된 방법으로 해당 기능을 재사용할 수 있습니다. 

 

 

기존 리액트 구조를 커스텀 훅으로 바꾸기

리액트 공식문서에 있는 custom hook의 예시에서는 네트워크 연결 상태를 관리하는 로직이 여러 컴포넌트에서 사용되는 경우 이 로직을 커스텀 훅으로 추출하면 여러 곳에서 쉽게 재사용할 수 있는 것을 보여줍니다.

 

커스텀 훅을 적용하지 않았을 때의 코드

import { useState, useEffect } from 'react';

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

 

커스텀 훅으로 리팩토링한 코드

import { useState, useEffect } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

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

 

위의 내용은 커스텀 훅을 사용할 때의 주요 이점 중 하나를 강조하고 있습니다. 바로 컴포넌트 내부에서 반복적인 로직을 줄이고, 코드가 실제로 하고자 하는 바를 더 명확하게 표현할 수 있다는 점입니다. 이를 통해 컴포넌트는 구현 세부사항보다는 그 기능의 의도를 표현하게 됩니다.

 

 

커스텀 훅을 사용하는 이점

1. 로직의 중복 감소: 컴포넌트 간에 반복되는 로직을 커스텀 훅으로 추출함으로써 코드 중복을 줄일 수 있습니다. 이는 코드의 유지보수를 쉽게 하고, 버그 발생 가능성을 낮춥니다.
2. 의도의 명확성: 커스텀 훅을 사용하면 컴포넌트의 코드가 '무엇을' 하고자 하는지를 표현할 수 있습니다. 예를 들어, useOnlineStatus라는 이름의 훅을 보면, 이 훅이 온라인 상태를 관리한다는 것을 쉽게 알 수 있습니다.
3. 세부 구현의 추상화: 네트워크 상태를 체크하거나 API 호출 같은 외부 시스템과의 상호작용을 관리하는 복잡한 세부사항을 커스텀 훅 안에 숨깁니다. 이로써 컴포넌트는 이러한 구현 세부사항을 신경 쓰지 않고, 실제로 필요한 기능에 집중할 수 있습니다.

 

 

코드 예시 해석

기존의 코드에서 useOnlineStatus 커스텀 훅을 도입하면 각 컴포넌트에서 네트워크 상태를 체크하는 로직을 직접 구현할 필요가 없습니다. 대신, 이 훅을 호출하여 반환된 값(isOnline)을 사용하여 컴포넌트의 UI를 조정할 수 있습니다. 이는 컴포넌트가 실제로 수행해야 할 작업을 간결하게 표현하면서도, 네트워크 이벤트에 대한 구독 및 구독 해제 같은 복잡한 작업을 훅 내부에서 처리하게 합니다.

 

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

 

이 코드에서 StatusBar 컴포넌트는 isOnline 상태를 사용해서 사용자에게 현재 네트워크 연결 상태를 표시합니다. 네트워크 상태가 변할 때마다 useOnlineStatus 훅은 이 변화를 감지하고 컴포넌트를 적절히 업데이트하여 최신 상태를 반영합니다. 이 방법으로, 컴포넌트는 자신의 주요 기능에 집중할 수 있으며, 내부 로직은 훅에 의해 관리됩니다.