react · JavaScript
오류 문구
Each child in a list should have a unique "key" prop.
무슨 뜻인가
목록으로 그린 형제 요소들에 key가 없어, 다음 렌더에서 어느 것이 어느 것인지 React가 짝지을 수 없다는 뜻입니다. items.map(...)으로 요소를 만들면서 key를 빼먹은 것이고, 이것은 경고라 화면은 일단 그려지지만 목록이 바뀔 때 조용한 버그로 돌아옵니다 — 입력 칸의 값이나 애니메이션이 엉뚱한 줄에 남는 것이 그 증상입니다. 데이터에 있는 안정된 id를 key로 주세요. 배열의 인덱스를 key로 쓰는 것은 순서가 절대 바뀌지 않고 중간에 끼워 넣거나 지우지 않는 목록에서만 안전하고, 그렇지 않으면 key가 없는 것과 사실상 같은 문제를 냅니다. React 19부터는 앞머리에 붙던 Warning:이 사라졌습니다.
고치는 명령
한 줄 명령으로 끝나지 않습니다. 설명에 무엇을 봐야 하는지 적어 두었습니다.
- 내는 도구
- react
- JavaScript
- 15
브라우저와 node의 오류는 대개 무엇이 잘못되었는지만 알려 주고 왜 그 값이 그렇게 되었는지는 알려 주지 않아서 — undefined를 읽었다, 함수가 아니었다, JSON이 아니었다 — 고칠 자리는 터진 줄이 아니라 그 값을 만든 위쪽에 있고, ?.와 기본값으로 그 줄만 조용하게 만들면 같은 문제가 더 먼 곳에서 더 알아보기 어려운 꼴로 다시 나타납니다.
오류 문구를 읽는 법
- 첫 줄부터 읽습니다. 아래로 갈수록 도구 내부 이야기이고, 정작 원인은 맨 위에 적혀 있습니다.
- 파일 이름과 줄 번호가 있으면 거기가 시작점입니다 — 스택의 가장 위가 아니라, 내가 쓴 파일이 나오는 가장 위 줄입니다.
- 문구를 그대로 검색합니다. 다만 내 경로와 변수 이름은 지웁니다 — 그 부분이 검색을 방해합니다.
- 같은 문구가 도구 판마다 다르게 나옵니다. 검색 결과가 안 맞으면 판 번호를 함께 넣어 봅니다.
- 고치는 명령을 붙여 넣기 전에 그 명령이 무엇을 버리는지 확인합니다. 되돌릴 수 없는 것이 섞여 있습니다.
자주 묻는 질문
Q. Each child in a list should have a unique "key" prop. 는 무슨 뜻인가요?
목록으로 그린 형제 요소들에 key가 없어, 다음 렌더에서 어느 것이 어느 것인지 React가 짝지을 수 없다는 뜻입니다. items.map(...)으로 요소를 만들면서 key를 빼먹은 것이고, 이것은 경고라 화면은 일단 그려지지만 목록이 바뀔 때 조용한 버그로 돌아옵니다 — 입력 칸의 값이나 애니메이션이 엉뚱한 줄에 남는 것이 그 증상입니다. 데이터에 있는 안정된 id를 key로 주세요. 배열의 인덱스를 key로 쓰는 것은 순서가 절대 바뀌지 않고 중간에 끼워 넣거나 지우지 않는 목록에서만 안전하고, 그렇지 않으면 key가 없는 것과 사실상 같은 문제를 냅니다. React 19부터는 앞머리에 붙던 Warning:이 사라졌습니다.
Q. 어떻게 고치나요?
한 줄 명령으로 끝나지 않습니다. 위 설명에서 무엇을 봐야 하는지 적어 두었습니다.
Q. 어느 도구가 내는 오류인가요?
react입니다. JavaScript 갈래에 있고, 문구는 11낱말입니다.