React 컴포넌트 분리 후 화면이 렌더링되지 않을 때

컴포넌트를 분리하거나 리팩토링한 후 배포했을 때 화면이 깨지거나 특정 기능이 작동하지 않는 경우가 있다. 이럴 때는 화면 하나만 보지 말고 로그와 응답을 같이 봐야 한다.

브라우저 개발자 도구의 콘솔을 먼저 확인한다

React 컴포넌트에 문제가 있으면 보통 콘솔에 에러 메시지가 나타난다.

Error: Cannot read property 'map' of undefined
Warning: Each child in a list should have a unique "key" prop
Error in event handler:

에러 메시지 전체를 복사해서 보관한다. 특히 어느 파일의 몇 번째 줄인지를 가리키므로, 그 부분을 먼저 확인하는 것이 효율적이다.

네트워크 탭에서 API 응답을 확인한다

컴포넌트가 렌더링되지 않는 이유가 데이터가 없어서일 수도 있다. 네트워크 탭에서 API 요청을 확인한다.

• 요청이 실제로 나가는가
• 응답 코드가 200인가
• 응답 body에 예상하던 데이터가 있는가

데이터가 빈 배열로 오거나, 에러 응답이 오는 경우가 자주 있다.

컴포넌트의 상태(state)를 확인한다

React Developer Tools 확장 프로그램을 사용해서 컴포넌트의 현재 state와 props를 확인한다. 특히 다음을 확인한다.

• 데이터를 받아야 하는 state가 비어있는가
• props가 올바르게 전달되고 있는가
• useEffect가 제대로 실행되는가

상태가 예상과 다르면 컴포넌트 내부의 로직을 다시 검토해야 한다.

모바일 화면도 확인한다

반응형 디자인을 적용했다면 데스크톱과 모바일에서 다르게 보일 수 있다. 브라우저의 반응형 디자인 모드에서 모바일 폭과 터치 이벤트 흐름을 확인한다.

빌드 로그를 다시 확인한다

배포 후 빌드 로그를 검토한다.

npm run build

경고나 에러가 있었다면 그것이 문제의 원인일 가능성이 높다. 특히 "Component is not defined" 같은 import 관련 에러가 있는지 확인한다.

로컬과 운영의 차이를 기록한다

로컬에서는 정상이지만 운영에서 문제가 나는 경우라면, 두 환경의 차이를 명확히 한다.

• 환경변수 차이
• 데이터베이스 상태 차이
• 캐시 상태 차이

한 줄로라도 차이점을 기록해두면 다음 확인이 훨씬 빨라진다.

한 부분씩 롤백해본다

문제의 원인을 좁히기 위해 최근 변경사항을 한 부분씩 롤백해본다. 어느 변경사항에서부터 문제가 나타나는지 찾으면 그 부분을 집중해서 검토할 수 있다.

마지막으로, 이 확인 과정을 체크리스트로 만들어 다음 컴포넌트 관련 문제에서 빠르게 대응하면 된다.