[Web] 리액트 훅스 최적화 전략

리액트는 컴포넌트 기반의 사용자 인터페이스를 구축하기 위한 인기 있는 라이브러리입니다. 리액트 훅스는 함수형 컴포넌트에서 상태와 생명주기 기능을 사용하도록 도와주며, 이에 따라 코드의 간결성과 재사용성을 높여줍니다. 하지만 잘못된 사용은 성능 저하를 초래할 수 있습니다. 이번 글에서는 리액트 훅스를 최적화하는 전략을 소개합니다.

1. 필수적으로 useMemo와 useCallback 사용하기

useMemo와 useCallback은 불필요한 연산과 렌더링을 피하기 위해 사용됩니다. useMemo는 메모이제이션된 값을 반환하고, useCallback은 메모이제이션된 함수를 반환합니다. 이를 통해 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다.

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

function MyComponent({ items, onItemClicked }) {
  const processedItems = useMemo(() => {
    return items.map(item => item.value * 2);
  }, [items]);

  const handleClick = useCallback((item) => {
    onItemClicked(item);
  }, [onItemClicked]);

  return (
    <ul>
      {processedItems.map(item => (
        <li key={item} onClick={() => handleClick(item)}>{item}</li>
      ))}
    </ul>
  );
}

2. useEffect의 의존성 배열 신중히 설정하기

useEffect는 컴포넌트가 마운트되거나 업데이트될 때 특정 작업을 수행하도록 설정할 수 있습니다. 의존성 배열을 정확하게 설정하여 필요할 때만 효과가 실행되도록 조정하는 것이 중요합니다.

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

function ExampleComponent({ someProp }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData(someProp).then(response => setData(response));
  }, [someProp]);

  return <div>{data ? data : 'Loading...'}</div>;
}

3. useReducer로 복잡한 상태 관리하기

상태 로직이 복잡해지는 경우 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:
      return state;
  }
}

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

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

정리 및 마무리

리액트 훅스를 잘 활용한다면 코드의 가독성과 성능을 크게 향상시킬 수 있습니다. useMemo와 useCallback을 적절히 사용하여 불필요한 렌더링을 줄이고, useEffect의 의존성 배열을 신중히 설정하며, useReducer로 복잡한 상태를 관리하는 것이 그 전략입니다. 이러한 최적화 전략을 통해 더욱 효율적인 리액트 애플리케이션을 개발해보세요.