리액트) encountered two children with the same key, 오류 해결 방법, 고유한 key 값 설정하기

 

 

 

👇 오류난 코드

        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {newTweet.map((tweet) => {
          return <Tweet tweet={tweet} key={tweet.id} />;
        })}

 

주어진 트윗 목록인 dummyTweets에는 고유한 id값이 있어서 key값에 tweet.id를 설정했지만, 속성이 모든 개체에서 고유하지 않다고 오류가 났다. 

 

id라는 고유한 값이 있어서 문제가 없을거라고 생각했지만, 왜인지 모르게 오류가 났다. 

 

 

 

😄오류해결 방법

map() 화살표 함수에 두 번째 매개변수인 index 를 사용하는 것이다.

 

👇 해결한 코드

        {/* TODO : 하나의 트윗이 아니라, 주어진 트윗 목록(dummyTweets) 갯수에 맞게 보여줘야 합니다. */}
        {newTweet.map((tweet, index) => {
          return <Tweet tweet={tweet} key={index} />;
        })}

 

 

 

😃혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓