리액트 성능 최적화 use-what-changed로 불필요한 리렌더링 잡아내기

리액트 성능 최적화! use-what-changed로 불필요한 리렌더링 잡아내기

1. 들어가며

React 애플리케이션을 개발하다 보면 불필요한 리렌더링이 발생하는 경우가 많습니다. 예를 들어, prop이나 state가 변경되지 않았음에도 컴포넌트가 다시 렌더링되는 경우가 있죠.

 

이런 불필요한 렌더링은 성능 저하를 유발할 수 있으며, 특히 대규모 애플리케이션에서는 사용자 경험에도 영향을 미칠 수 있습니다.

 

이럴 때 사용할 수 있는 강력한 도구 중 하나가 use-what-changed입니다. 이 훅을 활용하면 어떤 값이 변경되어 컴포넌트가 다시 렌더링되었는지 쉽게 파악할 수 있습니다.

 

이 글에서는 use-what-changed의 사용법과 실전 활용 방법을 알아보고, React 성능 최적화에 어떻게 도움을 줄 수 있는지 살펴보겠습니다.

---

2. use-what-changed란?

use-what-changed는 React 컴포넌트에서 props, state, context, ref 등의 변경 사항을 추적하여 어떤 값이 바뀌었는지를 콘솔에 출력해주는 훅입니다.

 

✅ 주요 기능:

• 리렌더링 시 어떤 값이 변경되었는지 추적
• 변경된 props 또는 state를 콘솔에서 쉽게 확인 가능
• 불필요한 리렌더링을 방지하여 React 성능 최적화

---

3. 설치 및 기본 사용법

1️⃣ 설치

먼저 use-what-changed 패키지를 설치해야 합니다.

npm install use-what-changed
# 또는
yarn add use-what-changed

2️⃣ 기본 사용 예제

설치 후, React 컴포넌트에서 import하여 사용할 수 있습니다.

import React from 'react';
import useWhatChanged from 'use-what-changed';

const MyComponent = ({ title, content }) => {
  useWhatChanged('MyComponent', { title, content });

  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
};

export default MyComponent;

위 코드에서는 title과 content prop이 변경될 때마다 어떤 값이 바뀌었는지 콘솔에서 확인할 수 있습니다.

---

 

4. 실전 활용 예시

🔹 State 변경 추적하기

컴포넌트 내부에서 useState를 사용하고 있을 때, 특정 state 값이 변경될 때만 리렌더링이 발생해야 합니다. 하지만 불필요한 state 변경이 발생하면 리렌더링이 불필요하게 많아질 수 있습니다.

 

아래 코드를 보면, count 값이 변경될 때마다 이전 값과 현재 값의 변화를 추적할 수 있습니다.

import React, { useState } from 'react';
import useWhatChanged from 'use-what-changed';

const Counter = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('React');

  useWhatChanged('Counter', { count, name });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>

      <p>Name: {name}</p>
      <button onClick={() => setName(name === 'React' ? 'Next.js' : 'React')}>
        Toggle Name
      </button>
    </div>
  );
};

export default Counter;

 

✅ 결과:

• count가 변경될 때만 리렌더링이 발생해야 하지만, name도 함께 리렌더링을 유발하는지 확인 가능
• 콘솔에서 어떤 state가 변경되었는지 출력되므로, 불필요한 렌더링 원인을 쉽게 파악

---

5. 장점

1. 디버깅 용이
   • useEffect, useMemo, useCallback 등에서 어떤 값이 변경되었는지 추적 가능
   • 예상치 못한 리렌더링 원인을 쉽게 찾을 수 있음
2. 성능 최적화
   • 불필요한 상태 변경을 방지하여 성능 문제를 개선하는 데 도움
3. 가독성 향상
   • console.log() 대신 명확하게 어떤 값이 변했는지 확인 가능
4. 빠른 문제 해결
   • 의존성 배열의 특정 값이 변할 때만 실행되어야 하는 경우, 예상과 다른 동작을 쉽게 찾아낼 수 있음

use-what-changed 훅은 리액트 컴포넌트의 렌더링 최적화 및 디버깅을 위해, 이전과 현재의 props 또는 state를 비교하여 변경된 값을 쉽게 확인할 수 있도록 도와줍니다. 이를 통해 개발자는 불필요한 렌더링을 줄이고, 성능 문제를 조기에 발견하여 개선할 수 있습니다.

이 훅은 특히 useEffect가 예상과 다르게 실행될 때 문제를 파악하는 데 매우 유용합니다. 🚀

 

📌 React 성능 최적화에 어떻게 도움을 줄까?

🚀 1) 불필요한 리렌더링 방지
→ use-what-changed를 통해 의도치 않게 변경되는 state나 prop을 추적하여 리렌더링을 최적화할 수 있습니다.

 

🚀 2) React.memo와 함께 사용하여 최적화
→ 특정 값이 변경될 때만 렌더링되도록 React.memo와 함께 사용하면 성능을 더욱 개선할 수 있습니다.

import React, { memo } from 'react';
import useWhatChanged from 'use-what-changed';

const MemoizedComponent = memo(({ value }) => {
  useWhatChanged('MemoizedComponent', { value });

  return <p>{value}</p>;
});

export default MemoizedComponent;

 

🚀 3) 개발자 경험 향상
→ 디버깅이 쉬워지고, 렌더링 문제를 빠르게 해결할 수 있습니다.

 

 

---

6. 마무리

React 성능 최적화에서 불필요한 리렌더링을 잡아내는 것은 매우 중요합니다. use-what-changed를 활용하면 어떤 값이 변경되었는지 쉽게 추적할 수 있으며, 이를 기반으로 성능을 최적화할 수 있습니다.

✅ 핵심 정리:

• use-what-changed는 props, state 변경을 추적하는 디버깅 툴
• 불필요한 리렌더링을 감지하여 성능 최적화 가능
• React.memo, useMemo, useCallback과 함께 사용하면 더욱 효과적