M

MLOG

한국어

React 커스텀 훅을 활용하여 컴포넌트 로직을 추출하고 재사용하여 코드 유지 보수성, 테스트 용이성 및 전반적인 애플리케이션 아키텍처를 개선하는 방법을 알아보세요.

React 커스텀 훅: 재사용성을 위한 컴포넌트 로직 추출하기

React 훅은 React 컴포넌트를 작성하는 방식에 혁명을 일으켰으며, 상태 및 사이드 이펙트를 관리하는 더욱 우아하고 효율적인 방법을 제공합니다. 다양한 훅 중에서 커스텀 훅은 컴포넌트 로직을 추출하고 재사용하기 위한 강력한 도구로 두각을 나타냅니다. 이 글은 React 커스텀 훅을 이해하고 구현하기 위한 포괄적인 가이드를 제공하여, 더 유지 보수 가능하고 테스트하기 쉬우며 확장 가능한 애플리케이션을 구축할 수 있도록 지원합니다.

React 커스텀 훅이란 무엇인가요?

본질적으로 커스텀 훅은 "use"로 시작하는 이름을 가진 JavaScript 함수이며 다른 훅을 호출할 수 있습니다. 이를 통해 컴포넌트 로직을 재사용 가능한 함수로 추출하여 코드 중복을 제거하고 더 깔끔한 컴포넌트 구조를 촉진할 수 있습니다. 일반 React 컴포넌트와 달리 커스텀 훅은 UI를 렌더링하지 않으며, 단순히 로직을 캡슐화합니다.

커스텀 훅은 React 상태 및 라이프사이클 기능에 접근할 수 있는 재사용 가능한 함수라고 생각하세요. 이는 고차 컴포넌트(HOC)나 렌더 프롭스(Render Props)를 사용하지 않고도 여러 컴포넌트 간에 상태 저장 로직을 공유하는 환상적인 방법입니다. 고차 컴포넌트나 렌더 프롭스는 종종 읽기 어렵고 유지 보수하기 어려운 코드로 이어질 수 있습니다.

왜 커스텀 훅을 사용해야 할까요?

커스텀 훅을 사용하면 다음과 같은 수많은 이점을 얻을 수 있습니다:

첫 번째 커스텀 훅 만들기

실용적인 예시(API에서 데이터 가져오기)를 통해 커스텀 훅의 생성 및 사용법을 살펴보겠습니다.

예시: useFetch - 데이터 가져오기 훅

React 애플리케이션에서 다양한 API로부터 데이터를 자주 가져와야 한다고 상상해 보세요. 각 컴포넌트에서 데이터 가져오기 로직을 반복하는 대신, 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 abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

설명:

컴포넌트에서 useFetch 훅 사용하기

이제 React 컴포넌트에서 이 커스텀 훅을 사용하는 방법을 살펴보겠습니다:


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

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

설명:

고급 커스텀 훅 패턴

단순한 데이터 가져오기를 넘어, 커스텀 훅은 더 복잡한 로직을 캡슐화하는 데 사용될 수 있습니다. 다음은 몇 가지 고급 패턴입니다:

1. useReducer를 사용한 상태 관리

더 복잡한 상태 관리 시나리오에서는 커스텀 훅과 useReducer를 결합할 수 있습니다. 이를 통해 상태 전환을 더 예측 가능하고 체계적인 방식으로 관리할 수 있습니다.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

사용법:


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

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. useContext를 사용한 컨텍스트 통합

커스텀 훅은 React Context에 대한 접근을 단순화하는 데도 사용될 수 있습니다. 컴포넌트에서 useContext를 직접 사용하는 대신, 컨텍스트 접근 로직을 캡슐화하는 커스텀 훅을 만들 수 있습니다.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

사용법:


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

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. 디바운싱 및 스로틀링

디바운싱(Debouncing)과 스로틀링(Throttling)은 함수가 실행되는 속도를 제어하는 데 사용되는 기술입니다. 커스텀 훅은 이러한 로직을 캡슐화하는 데 사용될 수 있어, 이벤트 핸들러에 이러한 기술을 쉽게 적용할 수 있습니다.


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

사용법:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

커스텀 훅 작성을 위한 모범 사례

커스텀 훅이 효과적이고 유지 보수 가능하도록 하려면 다음 모범 사례를 따르십시오:

글로벌 고려 사항

글로벌 사용자를 위한 애플리케이션을 개발할 때 다음 사항을 염두에 두십시오:

예시: 커스텀 훅을 사용한 국제화된 날짜 형식 지정


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

사용법:


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

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

결론

React 커스텀 훅은 컴포넌트 로직을 추출하고 재사용하기 위한 강력한 메커니즘입니다. 커스텀 훅을 활용하면 더 깔끔하고, 유지 보수하기 쉬우며, 테스트 가능한 코드를 작성할 수 있습니다. React에 숙련될수록 커스텀 훅을 마스터하는 것은 복잡하고 확장 가능한 애플리케이션을 구축하는 능력을 크게 향상시킬 것입니다. 다양한 사용자에게 효과적이고 접근 가능하도록 커스텀 훅을 개발할 때 모범 사례를 따르고 글로벌 요소를 고려하는 것을 잊지 마십시오. 커스텀 훅의 힘을 받아들이고 React 개발 기술을 한 단계 끌어올리세요!