React에서 커스텀 훅 만들기

 

React는 재사용 가능한 로직을 손쉽게 작성할 수 있도록 돕는 강력한 기능인 **커스텀 훅(Custom Hook)**을 제공합니다. 커스텀 훅은 기존의 React 훅을 조합하거나 새로운 동작을 정의하여 코드의 중복을 줄이고 가독성을 향상시킬 수 있습니다. 이번 글에서는 커스텀 훅의 개념, 필요성, 그리고 구현 방법에 대해 알아보겠습니다.

---

커스텀 훅이란?

커스텀 훅은 use로 시작하는 JavaScript 함수로, React의 훅을 활용하여 만든 사용자 정의 훅입니다. 커스텀 훅은 React 컴포넌트에서 반복적으로 사용되는 상태 관리 로직, 데이터 페칭, 또는 기타 기능을 캡슐화하여 재사용성을 높이는 데 유용합니다.

커스텀 훅의 특징

1. 함수 기반: 커스텀 훅은 JavaScript 함수이므로 기존 함수의 특성을 모두 활용할 수 있습니다.
2. React 훅 사용 가능: 내부적으로 useState, useEffect 등의 React 훅을 사용할 수 있습니다.
3. 재사용성: 컴포넌트 간에 로직을 쉽게 공유할 수 있습니다.

---

커스텀 훅이 필요한 이유

React 컴포넌트를 개발하다 보면 다음과 같은 문제를 겪을 수 있습니다:

• 중복 코드: 비슷한 로직이 여러 컴포넌트에 반복적으로 나타날 때.
• 로직 분리 부족: 컴포넌트 내부에 복잡한 로직이 섞여 있어 유지보수가 어려울 때.

이런 문제를 해결하기 위해 커스텀 훅을 활용하면 로직을 별도의 함수로 추출하여 코드의 가독성과 재사용성을 높일 수 있습니다.

---

커스텀 훅 구현 방법

1. 상태 관리 로직 캡슐화하기

컴포넌트에서 자주 사용하는 상태 관리 로직을 커스텀 훅으로 추출할 수 있습니다. 예를 들어, 입력 필드의 상태를 관리하는 커스텀 훅을 만들어 보겠습니다.

예제: useInput 훅

import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return { value, onChange: handleChange };
}

export default useInput;

사용법

import React from 'react';
import useInput from './useInput';

function InputComponent() {
  const nameInput = useInput('');

  return (
    <div>
      <input type="text" {...nameInput} />
      <p>입력 값: {nameInput.value}</p>
    </div>
  );
}

export default InputComponent;

위 코드에서 useInput 훅은 상태와 이벤트 핸들러를 캡슐화하여 컴포넌트에서 간결하게 사용할 수 있도록 해줍니다.

---

2. 데이터 페칭 로직 캡슐화하기

데이터를 가져오는 로직은 다양한 컴포넌트에서 공통적으로 사용됩니다. 이를 커스텀 훅으로 추출하면 중복 코드를 줄이고 테스트를 쉽게 할 수 있습니다.

예제: useFetch 훅

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      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 (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

사용법

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

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

  if (loading) return

Loading...

;
  if (error) return

Error: {error.message}

;

  return (

{data.map((item) => (
• {item.name}
))}

  );
}

export default DataComponent;

---

3. 이벤트 로직 캡슐화하기

사용자 인터랙션과 관련된 로직도 커스텀 훅으로 추출할 수 있습니다. 예를 들어, 클릭 카운트를 관리하는 훅을 만들어 보겠습니다.

예제: useCounter 훅

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

export default useCounter;

사용법

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>리셋</button>
    </div>
  );
}

export default CounterComponent;

---

커스텀 훅 작성 시 유의사항

1. use로 시작: 모든 커스텀 훅은 use로 시작해야 React가 훅으로 인식할 수 있습니다.
2. 훅 규칙 준수: 커스텀 훅 내부에서도 React 훅의 규칙을 준수해야 합니다. (예: 훅은 컴포넌트 또는 다른 훅 내부에서만 호출 가능)
3. 단일 책임 원칙: 하나의 훅은 하나의 책임만 가지도록 설계하여 가독성과 재사용성을 높이세요.

---

결론

React에서 커스텀 훅은 코드의 재사용성을 극대화하고 컴포넌트를 더 간결하게 만들 수 있는 강력한 도구입니다. 위에서 소개한 사례를 참고하여 프로젝트에 적합한 커스텀 훅을 작성해 보세요. 이를 통해 더 효율적이고 유지보수하기 쉬운 React 애플리케이션을 만들 수 있습니다.