인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

새일기 작성시 브라우저 콘솔창 오류메시지

작성

·

183

0

강사님 새 일기 작성 시 브라우저 콘솔창에 아래와 같은 오류 메세지가 나오는데요.

Warning: Encountered two children with the same key, undefined. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

at div

at div

at DiaryList (http://localhost:5173/src/components/DiaryList.jsx:23:22)

at div

at Home (http://localhost:5173/src/pages/Home.jsx?t=1713771954091:46:16)

at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3558:5)

at Routes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3993:5)

at App (http://localhost:5173/src/App.jsx?t=1713771954091:63:37)

at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:3936:15)

at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=b635def3:4676:5)

 

두개의 자식요소가 동일한 키를 가지고 있다고 되있는데 오류 나는 곳을 아무리 봐도 어디서 오류가 나는지 찾을 수가 없습니다 ㅠㅠ
뭐가 문제 일까요? ㅠㅠ

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

src/App.jsx의 App 컴포넌트를 확인해보시면 좋을 것 같습니다.

코드를 확인할 수 없기에 정확한 원인은 알 수 없지만

현재 새로운 일기가 생성될 때 기존에 존재하던 일기와 중복된 id를 갖도록 설정되어 있는 것 같습니다.

 

0

안녕하세요, 인프런 AI 인턴입니다. tttmmm100님의 질문에 대해 답변 드립니다.

질문하신 내용을 바탕으로, 일기 리스트에서 동일한 key 값을 가지는 문제로 보입니다. React에서는 리스트를 렌더링할 때 각 요소에 대해 고유한 key 값을 가질 것을 요구합니다. 이는 React가 DOM의 변화를 효율적으로 감지하고 적절한 업데이트를 할 수 있도록 하는 중요한 부분입니다. 따라서, 여러분의 프로젝트에서 발생한 경고 메시지는 두 개의 자식 요소가 동일한 key를 가지고 있다고 경고하는 것으로, 이로 인해 예상치 못한 렌더링 문제가 발생할 수 있습니다.

유사한 문제에 대한 해결책을 찾는 관련 질문이 예전에 있었습니다. 예를 들어, key 값에 undefined가 할당되는 경우 이 현상이 발생할 수 있으며, 이는 보통 ID나 고유 값을 생성하는 로직에 문제가 있을 때 나타납니다. 특히, 새 일기를 작성하거나 리스트를 업데이트 하는 과정에서 ID가 제대로 생성되지 않거나 전달되지 않아 발생할 수 있습니다.

다행히 이전에 비슷한 문제를 겪은 분의 경우를 찾았습니다. 이 경우, onCreate 함수 관련 문제였습니다. 함수에서 새 객체나 데이터를 생성할 때 고유 ID가 제대로 할당되지 않아서 동일한 key 경고가 발생했습니다.

이러한 문제에 대한 일반적인 해결 방법으로는 다음과 같습니다:
1. 각 일기 항목에 고유한 ID를 제대로 할당하고 있는지 확인합니다.
2. 새 일기를 추가하거나 기존 일기를 업데이트할 때 고유 ID가 제공되고 있는지 확인합니다.
3. map 함수를 사용하여 리스트를 렌더링할 때 각 요소에 key prop으로 고유한 값을 제공합니다.

해당 문제의 정확한 원인 파악을 위해서는, 문제가 발생하는 부분의 코드를 자세히 검토해야 합니다. 특히, DiaryList.jsx에서 리스트 아이템을 렌더링하는 부분과, 새 일기 항목을 생성하고 ID를 할당하는 로직이 핵심 포인트가 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기