React의 Custom Hooks는 구성 요소에서 재사용 가능한 기능을 제거하는 효과적인 도구입니다. 코드의 DRY(Don't Repeat Yourself), 유지 관리성 및 청결성을 지원합니다. 그러나 유용한 사용자 정의 후크를 개발하려면 React의 기본 아이디어와 권장 절차를 확실하게 이해해야 합니다. 이 게시물에서는 React에서 사용자 정의 후크를 개발하기 위한 몇 가지 최고의 전략과 이를 효율적으로 적용하는 방법을 설명하는 예제를 논의하겠습니다.

1. Hooks의 목적 이해하기

사용자 정의 후크를 만들기 전에 후크가 무엇이고 왜 존재하는지 이해하는 것이 중요합니다. Hooks를 사용하면 기능적 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있습니다. 사용자 정의 후크를 사용하면 여러 구성 요소에서 공유할 수 있는 재사용 가능한 함수로 구성 요소 논리를 추출할 수 있습니다.

예: 기본 맞춤 후크

다음은 카운터를 관리하는 사용자 정의 후크의 간단한 예입니다.

import { useState } from 'react';

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

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

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

// Usage in a component
// const { count, increment, decrement, reset } = useCounter(10);

2. 명명 규칙을 따르십시오.

React에는 사용자 정의 후크가 "use"라는 단어로 시작해야 하는 규칙이 있습니다. 이는 단지 스타일적인 선택이 아닙니다. React는 이 규칙을 사용하여 후크 규칙을 자동으로 적용합니다(예: 조건부 호출하지 않음).

팁: React가 후크임을 알 수 있도록 항상 사용자 정의 후크를 사용하여 시작하세요.

3. Hooks를 순수하게 유지하세요.

사용자 정의 후크는 순수 함수여야 합니다. 즉, 전역 변수를 수정하거나 외부 시스템과 직접 상호 작용하는 등의 부작용이 있어서는 안 됩니다. API 호출과 같은 부작용이 필요한 경우 useEffect.

예: 부작용이 있는 후크

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, error, loading };
}

// Usage in a component
// const { data, error, loading } = useFetchData('https://api.example.com/data');

4. 기존 후크 활용
사용자 정의 후크를 생성할 때 useState, useEffect, useContext 등과 같은 기존 React 후크를 활용해야 합니다. 이렇게 하면 사용자 정의 후크가 구성 가능하고 React의 내장 기능과 원활하게 작동할 수 있습니다.

예: 후크 결합

useState와 useEffect를 결합하여 로컬 저장소를 관리하는 사용자 정의 후크는 다음과 같습니다.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error(error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

// Usage in a component
// const [name, setName] = useLocalStorage('name', 'John Doe');

5. 재사용성과 구성

사용자 정의 후크를 만드는 주요 이유 중 하나는 재사용성을 높이는 것입니다. 좋은 사용자 정의 후크는 상당한 수정 없이 여러 구성 요소에서 사용할 수 있어야 합니다. 또한 후크를 함께 구성하여 보다 복잡한 로직을 구축할 수 있습니다.

팁: 여러 구성요소에서 재사용될 가능성이 있는 로직을 추출하는 데 집중하세요.

6. 후크 문서화

다른 코드와 마찬가지로 사용자 정의 후크도 잘 문서화되어야 합니다. 후크가 수행하는 작업, 허용되는 매개변수, 반환되는 내용 및 발생할 수 있는 부작용을 설명하는 주석을 포함하세요. 이렇게 하면 다른 개발자(및 미래의 귀하)가 후크를 더 쉽게 이해하고 올바르게 사용할 수 있습니다.

예: 후크 문서화

/**
 * useCounter
 * 
 * A custom hook to manage a counter.
 *
 * @param {number} initialValue - Initial value of the counter.
 * @returns {object} { count, increment, decrement, reset } - Current count and functions to modify it.
 */
function useCounter(initialValue = 0) {
  // Implementation
}

7. 후크 테스트

사용자 정의 후크가 예상대로 작동하는지 확인하려면 테스트가 필수적입니다. React-hooks-testing-library 또는 Jest와 같은 테스트 라이브러리를 사용하여 후크에 대한 단위 테스트를 작성하세요.

예: 후크에 대한 기본 테스트

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment and decrement counter', () => {
  const { result } = renderHook(() => useCounter(0));

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);

  act(() => {
    result.current.decrement();
  });

  expect(result.current.count).toBe(0);
});

애플리케이션 전체에서 기능을 추상화하고 재사용하는 효과적인 기술 중 하나는 React에서 사용자 정의 후크를 사용하는 것입니다. 후크의 목적을 이해하고, 명명 규칙을 준수하고, 후크를 순수하게 유지하고, 기존 후크를 활용하고, 재사용성을 보장하고, 문서화하고 테스트함으로써 React 개발 프로세스를 개선할 안정적이고 유지 관리 가능한 후크를 구축할 수 있습니다.