key 🗝

배열을 받아서 출력하는 컴포넌트를 작성 후 실행하면 key 값이 필요하다는 경고가 표시된다. 여기 말하는 key란 무엇일까?

배열에서 key가 필요한 이유

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

라고 리액트 공식문서에 적혀있다.

리액트는 state에서 변경사항이 있는 부분만 캐치해서 렌더링 해준다
이렇게 되면 변경되지 않는 데이터들에 대해서 업데이트를 하지 않아 효율적으로 작동시킬 수 있다.
그러면 리액트는 배열 전체를 다시 렌더링 할까 or 추가된 요소만 다시 렌더링 할까 리액튼느 추가된 요소만 렌더링 해준다. 그걸 구별하기 위해서 필요한 게 바로 key이다

Index로 키값을 사용하면 안되는 이유

{this.props.list.map((el, id) => {
          return (
            <div key={id} className="comment">
              <div>
                <strong>code_bootcamp</strong>
                <Comment value={el} />
              </div>
              <div>
                <i className="fas fa-times" id="commentOut" />
                <i className="far fa-heart" />
              </div>
            </div>
          );
        })}

저번에 만든 바닐라 자바스크립트로 만든 인스타그램을 리액트로 변환시키면서
피드의 댓글 리스트를 map()로 구현했다.
처음에 만들 때 공식 문서에 최후의 수단으로 index 값을 줘도 된다고??
하면서 그냥 index를 부여했는데 추가할 때는 당연히 문제는 없다.
바로 댓글 삭제 기능을 구현하려니 문제가 생겼다. 그래서 찾아보니
처음, 중간에 데이터를 추가하거나 삭제를 할 경우 문제가 발생한다고 한다.

더 좋은 다른 방법

문자열 사용

toString()과 같이 문자열로 키값을 부여하는 방법

ID값 사용

대부분 Data의 객체에서 .id 로 추출하여 사용한다.

카운트

 this.state = {
      commentCounter: 0,
      }
  const addComment = () => ({
        id: this.state.commentCounter++,

이런 식으로 addComment 호출할 때마다 카운트가 1씩 증가하여 고유한 키값을 줄 수도 있다.

참고사이트https://wooooooak.github.io/frontend/2019/01/30/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%B0%B0%EC%97%B4%EB%B3%80%EA%B2%BD/
https://ko.reactjs.org/docs/lists-and-keys.html