React 컴포넌트가 자꾸 리렌더링될 때 확인 순서

컴포넌트가 자꾸 리렌더링되면 처음부터 정답을 찾으려고 하면 오히려 더 많은 시간을 낭비하게 된다. 작은 신호부터 모아서 원인을 좁혀가는 게 중요하다.

콘솔 에러와 경고부터

브라우저 개발자 도구의 콘솔을 먼저 본다. 보통 리렌더링 관련 에러가 있으면 React 경고 메시지가 나타난다.

npm run build
# 브라우저 개발자 도구 > Console 탭 확인

"You provided a checked prop without an onChange handler" 같은 경고가 있다면 해당 컴포넌트가 의도치 않게 값을 업데이트하려고 한다는 뜻이다.

렌더링 발생 지점 찾기

React DevTools를 설치하고 Profiler 탭에서 어느 컴포넌트가 리렌더링되고 있는지 확인한다. 리렌더링 횟수와 소요 시간이 기록된다.

코드에서는 부모 컴포넌트의 상태(state)가 변경될 때마다 자식 컴포넌트도 함께 리렌더링되지 않는지 확인한다. 불필요한 상태 끌어올리기(lifting state up)가 없는지 봐야 한다.

의존성 배열 검토

// useEffect 훅의 의존성 배열 확인
useEffect(() => {
  // 코드
}, [dependency]); // 이 배열이 매번 변경되면 안 됨

useEffect, useCallback, useMemo의 의존성 배열이 의도한 대로 설정되었는지 확인한다. 객체나 배열을 직접 생성해서 넘기면 매번 다른 참조값이 되어 불필요한 실행을 유발한다.

네트워크 요청과 이벤트

네트워크 요청이 매번 트리거되고 있지는 않은지 확인한다. 폴링이나 자동 새로고침이 설정되어 있다면, 요청 완료 후 불필요한 상태 업데이트가 없는지 봐야 한다.

마찬가지로 이벤트 리스너가 여러 번 등록되고 있지 않은지, 정리 함수(cleanup function)가 제대로 실행되는지 확인한다.

단계적 수정과 검증

1. 한 가지만 수정한다
2. 브라우저에서 실제로 리렌더링 횟수가 줄었는지 본다
3. React DevTools Profiler로 시간 개선을 확인한다
4. 모바일 화면과 데스크탑에서 모두 테스트한다

리렌더링은 눈에 보이지 않지만 console.log나 DevTools로 항상 확인 가능하다.