[React] 커스텀훅(Hooks)은 왜 쓸까?

커스텀 훅이란?

커스텀 훅(Custom Hooks)은 React의 훅(Hooks) 기능을 사용하여 여러 컴포넌트에서 공통으로 사용되는 로직을 재사용할 수 있도록 해주는 함수입니다.

React의 내장 훅(`useState`, `useEffect`, `useContext` 등)을 결합하여 새로운 훅을 만들 수 있습니다.

이러한 커스텀 훅은 일반 함수와 비슷하게 동작하지만, React 훅의 규칙을 준수합니다.

커스텀 훅의 목적은 복잡한 로직을 하나의 컴포넌트에 집중시키지 않고, 독립된 함수로 분리함으로써 코드의 가독성과 유지보수성을 높이는 것입니다.

커스텀 훅 사용 이유

1. 코드 재사용성 : 여러 컴포넌트에서 공통으로 사용하는 로직을 하나의 커스텀 훅으로 만들면, 중복 코드를 줄이고 재사용성을 높일 수 있습니다.
2. 가독성 향상 : 컴포넌트의 로직을 분리하여 코드의 가독성을 향상시킵니다. 이를 통해 컴포넌트 자체는 UI에 집중하고, 비즈니스 로직은 커스텀 훅에서 처리합니다.
3. 테스트 용이성 : 커스텀 훅으로 분리된 로직은 별도로 테스트하기 쉽습니다. 이를 통해 로직의 정확성을 더 쉽게 검증할 수 있습니다.
4. 구조화된 코드 : 복잡한 상태 관리나 사이드 이펙트를 처리하는 로직을 깔끔하게 구조화할 수 있습니다.

커스텀 훅과 모듈의 차이점

목적

- 커스텀 훅 : React 컴포넌트의 상태 관리와 사이드 이펙트를 처리하는 로직을 재사용하기 위해 사용됩니다.

- 모듈 :  일반 자바스크립트 코드에서 재사용 가능한 함수, 객체, 클래스 등을 정의하고, 다른 파일에서 가져다 쓰기 위해 사용됩니다.

사용 방법

  - 커스텀 훅 : `use`로 시작하는 함수로 정의되며, React 컴포넌트 내부에서 사용됩니다.
  - 모듈 : `export`와 `import`를 사용하여 정의하고 가져옵니다. React와 무관하게 자바스크립트의 모든 부분에서 사용될 수 있습니다.

예시

  - 커스텀 훅 : React의 상태 관리 로직을 포함합니다. 

  import { useState, useEffect } from 'react';

  function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);

      useEffect(() => {
          async function fetchData() {
              const response = await fetch(url);
              const result = await response.json();
              setData(result);
              setLoading(false);
          }
          fetchData();
      }, [url]);

      return { data, loading };
  }
  
  export default useFetch;

  - 모듈 : 유틸리티 함수 등을 포함합니다.

// utils.js
  export function add(a, b) {
      return a + b;
  }

  export function subtract(a, b) {
      return a - b;
  }

 

 

 

커스텀 훅 예시코드 및 사용방법

다음은 API 데이터를 가져오는 커스텀 훅의 예시 코드와 이를 사용하는 방법입니다.

// useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                setData(result);
            } catch (e) {
                setError(e);
            } finally {
                setLoading(false);
            }
        }
        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

위의 커스텀 훅을 사용하여 데이터를 가져오는 컴포넌트를 만들어보겠습니다.

// App.js
import React from 'react';
import useFetch from './useFetch';

function App() {
    const { data, loading, error } = useFetch('https://api.example.com/data');

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>Data:</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
}

export default App;

 

 

결론

커스텀 훅은 React 컴포넌트에서 공통으로 사용되는 상태 관리와 사이드 이펙트를 재사용 가능한 함수로 추출하여 코드의 재사용성과 가독성을 높여줍니다.

만약 비동기 함수가 모듈에 정의되어 있고 해당 함수의 결과를 React 컴포넌트에서 사용해야 한다면, 모듈을 커스텀 훅으로 변경하는 것이 여러 면에서 유리합니다.