React 컴포넌트를 분리할 때 렌더링 문제가 생기면

컴포넌트를 작은 단위로 분리하면 코드는 깔끔해지지만, props 전달과 상태 동기화에서 실수하기 쉽다.

이벤트 흐름을 정리한다

부모에서 자식으로 props를 전달하고, 자식에서 다시 부모로 이벤트를 보낼 때의 흐름을 추적한다:

1. 부모 상태 변경
2. 자식에 props 전달
3. 자식이 부모의 콜백 함수 호출
4. 부모 상태 다시 업데이트
5. 자식 리렌더링

이 중 어느 단계에서 문제가 생기는지 확인한다.

브라우저에서 렌더링을 추적한다

npm run build

빌드 후 React DevTools를 사용해 컴포넌트 트리를 본다. 특히 불필요한 리렌더링이 되고 있는지 확인한다.

Props와 상태의 의존성을 확인한다

자식 컴포넌트가 받은 props가 제때에 업데이트되는지 본다. 만약 부모의 상태는 바뀌었는데 자식이 바뀐 props를 받지 못한다면, 의존성 배열 설정이 잘못된 걸 수 있다.

useEffect(() => {
  // props가 바뀔 때만 실행
}, [props]); // 의존성 배열

상태 이름을 명확히 한다

"error", "loading", "data" 같은 이름은 모호할 수 있다. 더 구체적인 이름을 사용하면 추적하기 쉽다:

const [isLoadingUserProfile, setIsLoadingUserProfile] = useState(false);

모바일 화면에서도 테스트한다

작은 화면에서는 브라우저 리플로우가 더 많이 생기거나, 터치 이벤트와 마우스 이벤트가 섞일 수 있다. 브라우저 개발자 도구에서 기기 시뮬레이션을 켜서 확인한다.

콘솔 로그를 남기고 검토한다

console.log('Received props:', props);
console.log('State updated:', state);

렌더링 순서와 상태 변화를 콘솔에서 실시간으로 추적할 수 있다. 이상한 점을 발견하면 바로 고칠 수 있다.

결과를 정리한다

문제가 "상태가 안 바뀐다"에서 "isUserLoaded props가 전달되지 않아서 자식이 업데이트 안 됨" 같은 구체적인 설명으로 변하면, 디버깅 속도가 훨씬 빨라진다.