React에서 key prop 문제를 찾는 방법

React 리스트를 렌더링할 때 key prop을 제대로 설정하지 않으면 예상치 못한 버그가 발생한다. 특히 컴포넌트가 커지면서 상태가 꼬이는 문제가 나타난다.

렌더링 조건부터 확인하기

React key 문제를 마주칠 때는 바로 수정하기 전에 렌더링 조건부터 확인하면 불필요한 변경을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 좁혀진다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

빌드한 후 리스트 아이템을 추가, 삭제하면서 상태가 제대로 유지되는지 확인한다.

확인 범위 정하기

React 쪽 문제는 화면만 보고 판단하면 놓치는 값이 많다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.

• 먼저 볼 것: 이벤트 흐름과 컴포넌트 리렌더링
• 같이 비교할 것: 정상일 때의 React 상태
• 기록해둘 것: 리스트 아이템 id, 렌더링 결과, 상태 변화

에러 문구와 로그 함께 보기

이벤트 흐름이 제대로 이루어지는지 확인할 때는 로그가 중요하다. React 개발자 도구에서 컴포넌트 트리와 상태를 함께 보면 key prop 문제가 더 명확해진다.

작게 바꿔보기

key prop 문제는 한 가지를 수정했을 때 바로 나타나지 않을 수 있다.

1. 원래 증상을 같은 조건에서 재현한다
2. 로그나 상태 변화에서 바뀐 부분을 한 줄로 정리한다
3. 공개 페이지에서 리스트 조작을 여러 번 해서 최종 확인한다

다음을 위해 기록하기

해결 자체보다 어떤 값이 달라졌는지 설명할 수 있는 상태가 더 중요하다. 어떤 key 값을 사용했는지, 언제 문제가 발생하는지 기록해두면 다음 번에도 빠르게 대응할 수 있다.