React 리스트의 key prop이 배포 후에 깨질 때

React 리스트를 렌더링할 때 key prop을 제대로 설정하지 않으면, 로컬에서는 눈에 띄지 않다가 배포 후 갑자기 제대로 작동하지 않는다. 문제를 크게 잡으면 모든 파일이 의심스러워져서 손대기 어려워진다.

핵심은 리스트의 각 항목이 정확히 추적되는지 확인하는 것이다. key prop이 없으면 리스트 항목의 상태가 엉켜서 예기치 않은 동작이 나타난다.

현재 프로세스와 상태 확인

배포된 서버의 프로세스가 정상적으로 실행 중인지 먼저 확인해야 한다.

sudo ss -lntp
df -h
sudo journalctl -n 80

ss로 포트와 프로세스를 본다. df로 디스크 상태를 확인한다. journalctl에서 시스템 에러를 찾는다.

key prop이 정말 설정되었는가

코드에는 key를 썼지만, 빌드 후 실제로 dom에 반영되었는지 확인하지 않은 경우가 많다. 브라우저 개발자 도구의 Elements 탭에서 실제 html을 본다.

리스트 항목이 key 속성을 가지지 않거나, key 값이 모두 같다면 문제가 있다. 특히 인덱스를 key로 사용했다면 더더욱 위험하다.

항목 순서가 바뀔 때를 대비했는가

key prop의 목적은 리스트 항목이 바뀌어도 같은 항목으로 추적하도록 하는 것이다. 만약 항목이 추가되거나 삭제되거나 순서가 바뀐다면, 안정적인 id를 사용해야 한다.

런타임에 생성되는 id(Math.random() 같은)는 절대 key로 사용하면 안 된다. 매번 렌더링할 때마다 다른 key가 생기기 때문이다.

증거 모으기

리스트 관련 문제가 반복된다면 확인 순서를 고정해둬야 한다. 매번 감으로 접근하면 같은 실수를 반복하게 된다.

1. 서버의 프로세스 상태를 확인한다 (ss, df, journalctl)
2. 브라우저 개발자 도구에서 실제 html의 key 속성을 본다
3. 리스트 항목의 추가/삭제/순서 변경을 테스트한다
4. 각 항목의 상태가 제대로 유지되는지 확인한다
5. 이전 버전과 현재 버전의 key 사용 방식을 비교한다

체크리스트

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해본다
3. 공개 화면에서 직접 리스트를 조작해본다

결과가 바뀐 이유를 로그와 화면으로 설명할 수 있으면 충분히 정리된 것이다. 관련 기록을 짧게라도 남겨두면 다음 확인이 훨씬 빨라진다.