고급 React Hooks 사용을 위한 팁과 요령

React Hooks는 단순히 상태와 생명주기 메서드를 함수형 컴포넌트로 가져오는 것 이상의 강력한 기능을 제공합니다.

여기서는 지난 편에 이어 useCallback, useMemo, useReducer를 더 효과적으로 사용하기 위한 실용적인 예제와 덜 알려진 방법들을 공유하고자 합니다.

 

1. useCallback과 useMemo, useReducer를 지혜롭게 사용하기

1.1 useCallback 예제: 이벤트 핸들러 최적화

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

function TodoList({ todos, toggleTodo }) {
  // useCallback을 사용하여 불필요한 렌더링 방지
  const toggle = useCallback(
    (id) => {
      toggleTodo(id);
    },
    [toggleTodo], // toggleTodo가 변경될 때만 함수를 다시 생성
  );

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => toggle(todo.id)}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

1.2 useMemo 예제: 복잡한 계산 캐싱

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

function ExpensiveComponent({ value }) {
  // useMemo를 사용하여 복잡한 계산 결과 캐싱
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(value);
  }, [value]); // value가 변경될 때만 계산

  return <div>{expensiveValue}</div>;
}

function computeExpensiveValue(value) {
  // 복잡한 계산 로직
  console.log('Computing expensive value...');
  return value * 2; // 예제를 단순화하기 위한 계산
}

 

1.3 useReducer 예제: 복잡한 상태 로직 관리

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:
      throw new Error();
  }
}

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

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

2. 성능 최적화를 위한 고급 전략

2.1 React.memo를 사용한 컴포넌트 메모이제이션

import React, { memo } from 'react';

const MemoizedComponent = memo(function MyComponent(props) {
  // 컴포넌트 로직
  return <div>Rendered {props.value}</div>;
});

2.2 커스텀 Hooks 예제: 데이터 가져오기

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, loading };
}

 

useCallback, useMemo, useReducer와 같은 React Hooks는 애플리케이션의 성능 최적화와 코드의 관리를 위한 강력한 도구입니다.

위의 예제들을 통해 이러한 Hooks를 실제 프로젝트에 어떻게 적용할 수 있는지에 대한 아이디어를 얻으셨기를 바랍니다.

효과적인 사용을 통해, 더 빠르고 반응성이 좋으며 유지보수가 용이한 React 애플리케이션을 구축하세요.