TIL.34 React key 와 id

출저

• React 공식문서
• 위코드 멘토님들(🥰)

(!!! 잘못된 정보가 포함되어 있는경우 바로 고쳐주시면 감사합니다!!!)

key 의 역할

• React에서 반복이 되는 리스트를 만들때 map()을 사용하는데, 이때 반복되어 만들어지는 리스트에는 key 값이 필요하다.

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

• 리액트 공식문서는 위와 같이 말하고 있는데, 컴포넌트 단위를 랜더링 하는 리액트의 특성상 필요한 부분만 선택적으로 랜더링을 하기위해 리액트 내부적으로 key 값이 필요하다고 해석했다.

key 를 이용하는 방법

• 이론은 공식문서를 읽었으니 알겠으나, 내가 알고 싶은 것은 map()을 써서 반복되는 리스트를 만들어 놓았고, 이것을 key 값으로 갖고와서 delete함수에서 쓰고 싶은 것이었다. 이때부터 id 와 혼동되기 시작했다. 그래서 key값을 어떻게 가져와야해???
• 답은 없다. key 값은 위에서도 말했듯이 개발자들이 쓰는 것이 아니라 react가 필요한 값이고, 그것을 우리는 고유한 값으로 지정만 해주면 되는 것이었다.
• 하지만 이것을 쓰고 싶으면 id 값으로 key 값을 넘겨서 쓰면 된다.!!

const addListComment = commentList.map((comm) => {
      return (
        <List
          comm={comm}
          key={comm.id}
          id={comm.id}
          USER={USER}
          deleteComment={this.deleteComment}
          coloringHeart={this.coloringHeart}
        />
      );
    });

• 위와 같이, map()으로 댓글 리스트를 생성하는 코드에서 comm을 인자로 받는데, comm 은 객체형이기 때문에 이미 그안에 id 값이 있고 이것을 새로 만들어지는 리스트마다 key와 id 라는 attribute값에 할당해준다. 이러면 아래 캡쳐한 React 문서의 말대로 하위 컴포넌트인 List에서 이 값을 사용할 수 있다.

key 값은 고유한 값이어야 한다

Index활용

• map()의 두번째 인자로 인덱스를 받아 키값으로 사용 하는 경우가 있는데, 이는 댓글과 같이 리스트를 삭제까지 해야하는 기능을 가진 리스트에게는 삭제되면서 인덱스가 바뀔 수 있기 때문에 부적절하다. 단순한 순서만 필요하다면 사용가능하다.

문자열 사용

• map인자.toString() 와 같이 고유한 문자열로 키값을 정해주는 방법도 있다. 하지만, 나처럼 인자가 객체나 리스트 형태면 좀 곤란하다.

ID 값 사용

• 대부분의 경우 데이터의 ID 값을 사용한다. 나도 인자(객체)에서 .id 로 추출하여 사용하였다.

형제 사이에서만 고유한 값이어야 한다.

• 위 세가지 중 하나를 이용하여 고유한 값을 key에 할당해줘야 하지만 만약 map()을 여러번 써서 같은 모양이나 비슷한 모양의 리스트들이 있다면, 그 모든 리스트가 각각 고유한 키값을 가질 필요는 없다는 뜻이다.
• 하나의 map()으로 만들어진 형제같은 리스트들끼리만 key의 고유성을 가지면 된다.