고급 Hooks와 사용자 정의 구현

고급 Hook와 커스텀 구현

React는 함수형 컴포넌트를 사용하여 웹 애플리케이션의 상태를 효율적으로 관리합니다. 특히 Hooks는 React에서 상태 관리와 생명주기 관리를 함수형 컴포넌트에서 실행 가능하게 하여 개발자가 보다 간단히 코드를 작성할 수 있도록 합니다. 이번 장에서는 고급 Hook와 커스텀 Hook를 사용하는 방법에 대해 알아보겠습니다.

고급 React Hooks란?

React는 기본적으로 여러 내장 Hook을 제공합니다. 기본적인 Hook은 이미 앞 장에서 소개되었는데, 그 중 대표적인 것이 useState와 useEffect입니다. 이번에는 고급 Hook인 useReducer, useMemo, useCallback을 알아보겠습니다.

useReducer

useReducer는 상태 관리에 특히 유용하며, Redux 등 다른 상태 관리 라이브러리의 구조와 유사한 방식으로 작동합니다. 일반적인 상태 관리의 복잡성과 큰 상태 객체를 다룰 때 사용하면 유용합니다.

예제:

import React, { 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:
      return state;
  }
}

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
export default Counter;

useMemo와 useCallback

useMemo와 useCallback은 컴포넌트의 렌더링 성능 최적화에 도움을 줍니다. useMemo는 값의 연산을 저장하고, useCallback은 함수 자체를 저장합니다.

예제:

import React, { useMemo, useCallback, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([]);

  const addItem = useCallback(() => {
    setList([...list, `Item ${count}`]);
  }, [list, count]);

  const computedCount = useMemo(() => count * 10, [count]);

  return (
    <div>
      <p>Computed Count: {computedCount}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

커스텀 React Hooks 만들기

때로는 내장 Hook으로만으로는 요구사항을 해결하기 어렵습니다. 이럴 때 커스텀 Hook을 만들어 공통적인 기능을 재사용할 수 있습니다.

커스텀 Hook을 만드는 방법

커스텀 Hook은 일반적인 JavaScript 함수처럼 동작하지만 다른 Hooks를 내부에서 호출할 수 있다는 점이 다릅니다. 아래는 데이터를 API에서 가져오는 커스텀 Hook의 예제입니다.

예제:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(result => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

export default useFetch;

useFetch를 사용하면 원하는 URL로부터 데이터를 편리하게 가져올 수 있습니다.

활용:

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

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

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
export default App;

마무리하며

이번 장에서는 React에서 고급 Hook과 커스텀 Hook을 활용하는 방법에 대해 설명드렸습니다. 이러한 기술을 사용하면 더욱 효율적이고 유지보수 가능한 애플리케이션을 구축할 수 있습니다. 다음 장에서는 이러한 기술을 실제 프로젝트에서 적용하는 방법에 대해 알아보겠습니다.