React에서의 key

post한것의 리스트를 불러오기 위해 맵함수를 썼는데 맵함수를 쓸때 꼭 필요한것이 바로 key 값이다. 매번 포스트를 추가하고 리스트를 불러올때마다 어떤것이 변하고 업데이트 되었는지 리액트에서는 감지하지 못하기때문에 전체를 re-rendering 되는데 매번 변할떄마다 전체를 리렌더링 한다면 효율이 떨어진다.

React 에서 key 가 필요한 이유

• 리액트는 상태가 바뀌면 이전 상태의 DOM tree와 이후 상태의 DOM tree 를 비교한다 이때 키가 같다면 동일한 요소로 판단하고 업데이트 한다.

단순히 index 를 쓰는것이 왜 안좋은가

• 인덱스를 키로 이용하면 요소를 하나만 바꾸어도 키와 값이 모두 다르니까 다 바뀌었다고 생각해 (인덱스에 해당하는 값이 다 바뀌니까) 전체를 렌더링해버린다.
• 순서가 일정하지 않을때는 각 요소에 유니크한 값으로 키를 사용해야 순서를 보장받을수있다.

어떤 값을 key 로 사용하는게 좋을까?

• 배열의 순서나 내용이 변경되지 않는다면 아무 key 나 사용이 가능하다 (동일한 키값은안됨).순서나 내용이 지속적으로 변화되는 상황이라면 요소를 특정할수있는 key(ex: id)를 사용한다
  유니크한 키를 통해서 이전에 요소와 변경된 이후의 요소가 동일한것이라는것을 ( 변경된 요소 말고 나머지 요소들은 변화가 없다는것을 ) 리액트에게 알려줌. 다른 컴포넌트에서 동일한 id값을 참조한다면 unique한 key값이 아니게되므로 그럴때는 key = {id + "string"} 이런식으로 스트링을 붙여줘서 고유해지도록하자!

장점 : 돔트리 업데이트시 효율성이 증가한다.

내 프로젝트에서 이런식으로 post의 id로 key 값을 줬는데 unique 한 key값이 아니라고 계속 오류가 났다.

 {post_list.map((p, idx) => {
            if (p.user_info.user_id === user_info?.uid) {
              return (
                  <Grid bg ="#ffffff" margin="10px 0px" key={p.id} > 
                    <Post  key={p.id} {...p} is_me />
                  </Grid>

튜터님 말씀으로는 다른 곳에서 post의 id값을 참조하고 있어서 오류가 날것이라고 말씀하셔서 그럴때는 그 Unique함을 주기위해 스트링을 붙이면 된다고 해서 이런식으로 주니 에러가 해결되었다.

{post_list.map((p, idx) => {
            if (p.user_info.user_id === user_info?.uid) {
              return (
                  <Grid bg ="#ffffff" margin="10px 0px" key={p.id+"post_list"} > 
                    <Post  key={p.id+"post_list"} {...p} is_me />
                  </Grid>

좀더 찾아보니 키값은 형제(sibling) 간에만 겹치지 않으면 된다고 하는데 그 이후에도 postlist를 쓰는 곳이면 비슷한 에러가 났다. post의 id 값은 다 다른데 왜 이런 오류가 난건지 찾지못하였다.이 부분에 대해서 좀더 공부해봐야 할것같다.