map 에서의 warning 에러

Question

Warning: Each child in a list should have a unique "key" prop.

이라는 에러가 나오는 데요. Comment.j 에서 이부분이 나오는 듯 합니다. 그런데 여러 코멘트인데 키를 무엇으로 정할 지도 모르겠으며, 어느 위치에 넣어야 하는 지 난감합니다. 신경은 쓰이고요.

수고하세요. 아직 리플라이 뎁스 문제도 이해를 못했구요.

           { props.commentLists && props.commentLists.map((comment, index) => (
                (!comment.responseTo &&
                    <React.Fragment>                
                        <SingleComment  postId={props.postId} comment={comment} 
                                        refreshFunction={props.refreshFunction} />
                        <ReplyComment   commentLists={props.commentLists} postId={props.postId} 
                                        parentCommentId={comment._id} refreshFunction={props.refreshFunction} />
                    </React.Fragment>
                )
            ))}

Answer

<React.Fragment key={comment._id} > 이렇게 하여 메시지가 없어 졌습니다. 감사합니다.

Answer

안녕하세요 skywalk 님 ~!

우선 간단하게 말하자면 유니크하고 변하지 않는 키를 가장 상위부분 현재 같은 경우는 React.Fragment 가 되겠죠 !

우선 가장 쉽게 index를 넣을수 있겠네요 ! 하지만 이건 최선은 아니에요 ..사실 저도 많이 넣지만 .....

왜냐면 유니크하지만 Static (변하지않는) 하지는 않습니다..

Array에 값을 추가하면 그것의 index는 변하기 때문이죠...

그래서 여기같은 경우는 comment의 ID를 넣어 주는게 가장 좋은 방법이라 생각됩니다.

이렇게 하는 이유는 리액트가 작은 부분의 DOM의 변화도 컨트롤을 해주기 위해서 입니다.

원래 어떤하나의 아이템만 변화를 요할때가 있을때 key값이 주어지지 않는다면 모든 row를 다 업데이트해버리게됩니다... !

수고하세요 ^^

Answer

추가로 ReplyComment.js 에서도 동일하게 하니 잘 작동 됩니다. 감사합니다. ps. 외국에 계신 것 같네요. 익숙한 사이렌 소리가 들리네요.

Answer

감사합니다. 그렇게 넣어보겠습니다.

skywalk

map 에서의 warning 에러

이 글과 비슷한 Q&A

local storage

list컴포넌트 생성하기

flask, react 로 개발한 웹앱을 모바일로 접속시 이미지가 안나오는 오류

npm run dev 연결이 안됩니다ㅜㅜ