key는 배열 형태를 map매서드로 변환할때 꼭 써줘야하는 값이다.
map매서드 안에 (ex)li) 배열끼리 엉키지않게 해당 map의 배열만이 갖는 유니크한 고유값을 넣어주는 것이다.
결국 key값도 {userId}/{content}와 같이 반복하니까 배열이 길어질수록 key에 해당하는 id값은 계속 늘어난다.
콘솔에 이런 에러 메세지가 뜬다.
유니크한 'key'값으로 이뤄진 리스트가 포함되어야 한다라는 것이다.
가상의 api같은 mockdata를 생성해서 받아왔다.
fetch함수를 이용했고, Feed.js라는 컴포넌트에 불러왔다.
FeedMock.js를 만들고 Feed.js에 임포트 할 것이다.
props를 이용했고, dComment는 밑의 스샷을 보면 알 수 있듯이 feed.js에서 지정한 일종의 변수명이다.
comment.이 붙은 id,userName,content 모두 mockdata에서 불러온 값과 일치하는 것을 알 수 있다.
이런식으로 map함수는 인자(위사진에서는 comment)에서 뿌려주고, 그 인자가 list를 돌며 반복한다라고 생각하면 될 것 같다.
그리고 Feed.js에 FeedMock.js를 불러왔다.
참고로 commentList는 위의 fetch함수를 보면 setCommentList와 state기능으로 묶인 것이고, set값에 mockdata의 data가 들어오면서 commetList의 기본값은 mockdata의 값이 들어오게 된다.
그리고 초기 값은 배열로 선언되었다! 이 빈배열에 FeedMock.js에서 만든 map함수가 들어간다.
id값이 3개니까 map함수는 총 3번을 돌게 되고, 배열끼리 엉키지않게 해당 map의 배열만이 갖는 유니크한 고유값을 넣어주는 것이다. (이렇게 이해해도 되려나...?)
아무튼 위와 같은 이유로 인해 dComment라는 변수명으로 props도 넘겨줄 수 있게 되는 것이다.
이제 mockdata가 잘 들어갔는지 확인해보자.
완성!
default값으로 댓글이 들어간 것을 확인 할 수 있다!
그리고 index는 절대 key값으로 활용하지말라고 공식문서에도 나와있다.
항목들이 재배열 되지 않는다면 잘 작동 하겠지만 재배열 된다면 비효율적으로 동작한다.
input을 사용자가 동적으로 추가하고 입력할 수 있을 때, key를 index로 주게되면 내가 입력한 input의 value가 +1 되어서 이동 될 것이다.
그러니까 중간에 index를 추가하거나 삭제하면 배열이 완전히 틀어져 버린다는 것이다.
리액트 초반에 댓글넣기 할 때 멋모르고 인덱스값을 줬는데
알았으니까 이제부터 하지 말도록 하자!
