문제 소개

React에서 컴포넌트를 마운트할 때, 종종 데이터를 초기화하거나 정렬하는 작업이 필요합니다.
이를 useEffect를 사용하여 처리하려는 경우가 많습니다.
하지만 useEffect의 의존성 배열에 빈 배열 []을 넣는 방식은 예상치 못한 부작용을 일으킬 수 있습니다.
특히 성능 문제를 유발하거나, 불필요한 렌더링을 초래할 수 있습니다.
이번 포스트에서는 이러한 문제를 해결하기 위한 구체적인 방법을 다루고, 실제 성능 개선 사례를 통해 최적화 방법을 설명하겠습니다.

직면한 문제

컴포넌트가 처음 마운트될 때, 데이터를 정렬하거나 초기화해야 하는 요구사항이 있었습니다.
이때 useEffect를 사용하여 데이터를 처리하려고 했는데, 빈 배열을 의존성 배열로 넣었을 때 불필요한 렌더링이 발생하거나, 예상과 다른 방식으로 동작하는 문제가 발생했습니다.

예를 들어, 정렬 작업을 useEffect 내에서 처리하면서 빈 배열을 의존성 배열로 넣은 경우, 특정 상태 변화나 props 변화가 있더라도 useEffect가 제대로 실행되지 않거나, 불필요한 실행이 발생하는 문제가 발생했습니다.
이러한 문제를 해결하기 위해서는 useEffect를 사용하되, 보다 명확한 의존성을 관리하는 방법이나 별도의 초기화 함수 사용을 고려해야 했습니다.

문제 해결 방안

1. useEffect 의존성 배열 명확히 설정 useEffect를 사용할 때, 빈 배열을 넣는 대신 의존성 배열을 명확히 설정하여 필요한 상태나 props의 변화에 반응하도록 하는 것이 중요합니다.
이를 통해 의도치 않은 동작을 방지할 수 있습니다.

2. 초기화 함수 사용 정렬과 같은 초기화 작업은 useEffect가 아니라 별도의 초기화 함수를 만들어서 처리하는 것이 더 효율적일 수 있습니다.
이를 통해 코드의 가독성을 높이고, 유지보수를 용이하게 할 수 있습니다.

3.최적화된 상태 관리 useState와 useEffect의 조합을 활용하여, 데이터가 변경될 때마다 불필요한 렌더링을 방지하고, 필요한 데이터만 재처리하는 방식으로 최적화할 수 있습니다.

구체적인 해결 방법

1. useEffect를 이용한 기본적인 상태 초기화 방식

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

const DataList = ({ data }) => {
  const [sortedData, setSortedData] = useState([]);

  useEffect(() => {
    const sorted = [...data].sort((a, b) => a.value - b.value);
    setSortedData(sorted);
  }, [data]); // 의존성 배열에 data를 넣어 data가 변경될 때만 실행되도록 설정

  return (
    <ul>
      {sortedData.map(item => (
        <li key={item.id}>{item.value}</li>
      ))}
    </ul>
  );
};

export default DataList;

2. 성능 최적화 및 병목 지점 분석

• 성능 측정을 위해 React의 Profiler API나 console.time을 사용하여 렌더링 성능을 측정합니다.
• 병목 지점 분석을 통해 데이터 정렬이나 상태 업데이트가 불필요하게 자주 발생하는지 확인합니다.
• React DevTools에서 렌더링 타이밍을 분석하여 성능을 최적화할 수 있는 부분을 찾습니다.

3. 개선 전후 비교

성능 개선 전후에 렌더링 시간과 리렌더링 횟수를 비교하여 성능 향상 여부를 확인합니다.

• 개선 전: useEffect를 사용하여 불필요하게 렌더링을 발생시키는 경우
• 개선 후: 상태 변경 시에만 렌더링이 일어나며, 필요한 데이터만 처리하도록 최적화한 경우

성능 테스트 결과 그래프

console.time('Sorting');
const sorted = [...data].sort((a, b) => a.value - b.value);
console.timeEnd('Sorting');

실제 적용 사례 코드

// 데이터를 정렬하는 초기화 함수와 useEffect 조합
import React, { useState, useEffect } from 'react';

const DataList = ({ data }) => {
  const [sortedData, setSortedData] = useState([]);

  const initializeData = () => {
    console.time('Sorting');
    const sorted = [...data].sort((a, b) => a.value - b.value);
    console.timeEnd('Sorting');
    setSortedData(sorted);
  };

  useEffect(() => {
    initializeData();
  }, [data]); // data가 변경될 때마다 초기화 함수 실행

  return (
    <ul>
      {sortedData.map(item => (
        <li key={item.id}>{item.value}</li>
      ))}
    </ul>
  );
};

export default DataList;

결론

useEffect를 빈 배열로 설정하여 초기화 작업을 처리하는 것은 특정 상황에서 유효할 수 있지만, 성능과 유지보수 측면에서 불필요한 렌더링을 방지하기 위해서는 의존성 배열을 명확히 설정하거나 초기화 함수로 데이터를 처리하는 방식이 더 효율적일 수 있습니다.

성능 테스트와 분석을 통해 병목 지점을 찾고, 최적화된 방법을 적용함으로써 React 애플리케이션의 성능을 향상시킬 수 있었습니다.