React 컴포넌트 성능 최적화 방법은?

React 애플리케이션에서 성능을 최적화하기 위해서는 여러 가지 기법을 사용할 수 있습니다. 다음 코드에서는 상태 변경 시 컴포넌트가 불필요하게 리렌더링되는 문제를 가지고 있습니다.

이 문제를 해결하기 위해 어떤 방법을 사용할 수 있을까요?

JAVASCRIPT

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

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  const handleClick = () => {
    incrementCount();
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

답변

React.memo로 컴포넌트 감싸기 setState의 콜백 함수 사용하기 useMemo 훅을 사용하여 값 캐싱하기 useEffect로 상태 관리하기

로그인 후 제출하기