React에서 불필요한 리렌더링을 줄이려면

리렌더링이 많아지는 이유

1. 부모 컴포넌트가 리렌더링되면 자식도 함께 리렌더링
2. 상태 변경이 예상보다 자주 발생
3. 이벤트 핸들러나 콜백 함수가 매번 새로 생성됨

네 번째 문제는 의외로 흔하다. 함수를 인라인으로 정의하면 매 렌더링마다 새 참조가 생기고, 이를 자식에 props로 넘기면 자식도 리렌더링된다.

React DevTools로 추적하기

# 1. React DevTools 브라우저 확장 설치
# 2. Profiler 탭에서 렌더링 기록
# 3. 어느 컴포넌트가 반복 리렌더링되는지 확인

의외로 자주 리렌더링되는 컴포넌트를 찾으면 그 부분을 최적화할 가치가 있다.

이벤트 흐름 추적

// 나쁜 예: 매 렌더링마다 새 함수 생성
return <button onClick={() => handleClick(item)}>Click</button>;

// 좋은 예: 콜백 메모이제이션
const handleClickMemo = useCallback(
  () => handleClick(item),
  [item]
);

단순한 변경이지만 성능에 미치는 영향이 크다.

상태 구조 다시 생각해보기

큰 객체 하나를 상태로 관리하면 그 객체의 일부만 변경되어도 전체 리렌더링이 일어난다.

// 대신 필요한 부분만 분리
const [count, setCount] = useState(0);
const [isLoading, setIsLoading] = useState(false);
// 위가 하나의 객체보다 낫다

실제 배포 환경에서 측정

dev 환경에서는 React 개발 모드로 실행되므로 의도적으로 리렌더링이 많다. 실제 성능은 프로덕션 빌드에서 측정해야 한다:

npm run build
# 프로덕션 빌드로 성능 측정

로컬에서는 빠르지만 배포 환경에서 느린 경우도 있다. 이는 네트워크나 서버 성능 문제일 수 있다. 기록을 남겨두고 다양한 환경에서 테스트하는 게 중요하다.