January 19, 2025

React에서 불필요한 리렌더링 방지 방법

답변 확인

1. React.memo 사용

React.memo는 컴포넌트를 메모이제이션하여, props가 변경되지 않는 경우 렌더링을 방지 함
부모 컴포넌트가 자주 업데이트될 때, 자식 컴포넌트의 불필요한 리렌더링 방지.

import React from 'react';
 
const ChildComponent = React.memo(({ value }) => {
  console.log('렌더링됨');
  return <div>{value}</div>;
});
 
export default ChildComponent;

주의점 :

전달된 props가 객체, 배열, 함수 등 참조 타입일 경우, 동일한 값을 유지하려면 useCallback 또는 useMemo와 함께 사용해야 함

2. useMemo와 useCallback

`useMemo`

설명:
- 복잡한 계산 결과를 메모이제이션하여 불필요한 재계산 방지.
활용 사례:
- 대량 데이터 처리, 복잡한 연산 등 계산 비용이 큰 작업.

const memoizedValue = useMemo(() => complexCalculation(a, b), [a, b]);

`useCallback`

설명:
- 함수를 메모이제이션하여 동일한 참조를 유지.
활용 사례:
- 자식 컴포넌트에 전달되는 콜백 함수의 참조를 유지해 리렌더링 방지.

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

주의 사항 :

메모이제이션도 추가 비용이 발생하므로, 실제로 성능 개선이 필요한 경우에만 적용

// 불필요한 메모이제이션 (단순한 함수는 비용만 증가)
const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

3. 상태(state)와 props 관리 최적화

상태 분리 : 상태를 필요한 컴포넌트로만 전달하여 리렌더링 범위 최소화

const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>증가</button>
      <Child count={count} />
    </div>
  );
};
 
const Child = React.memo(({ count }) => {
  console.log('Child 렌더링');
  return <div>카운트: {count}</div>;
});

Context API 최적화
- Context를 분리하여 필요하지 않은 컴포넌트까지 리렌더링되지 않도록 설정

4.React DevTools Profiler 활용

React DevTools Profiler를 통해 병목 구간을 파악하고 성능 최적화

빈번히 리렌더링되는 컴포넌트
비싼 연산이나 무거운 로직을 포함한 컴포넌트

5. 예제코드

복잡한 계산 최적화

function ExpensiveCalculation({ value }) {
  const computedValue = useMemo(() => {
    console.log('비싼 계산 수행...');
    return value * 2;
  }, [value]);
 
  return <div>계산 결과: {computedValue}</div>;
}

함수 메모이제이션

const handleClick = useCallback(() => {
  console.log('버튼 클릭');
}, []);

상태와 props 관리

const Parent = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>증가</button>
      <Child count={count} />
    </div>
  );
};
 
const Child = React.memo(({ count }) => {
  console.log('Child 렌더링');
  return <div>카운트: {count}</div>;
});

결론

React.memo

컴포넌트를 메모이제이션하여 props가 변경되지 않으면 리렌더링 방지.

useMemo와 useCallback

각각 복잡한 계산 결과`와 함수의 참조를 메모이제이션.

상태 관리 최적화

상태를 필요한 컴포넌트로만 전달하여 리렌더링 범위를 최소화.

React DevTools Profiler

병목 구간을 파악하고 최적화

React에서 불필요한 리렌더링 방지 방법

답변 확인

1. React.memo 사용

주의점 :

2. useMemo와 useCallback

useMemo

useCallback

3. 상태(state)와 props 관리 최적화

4.React DevTools Profiler 활용

5. 예제코드

결론

Top comments (2)

`useMemo`

`useCallback`