Key

키는 리액트가 어떤 항목을 삭제시키고 추가할지 식별하는 것을 돕는 역할을 하기에 필요하다. key는 엘리먼트에 안정적인 고유성을 부여해주기 때문에 배열 내부의 엘리먼트에 저장해야 한다.

key는 보통 리스트 항목 간 구별할 수 있는 유일한 식별자로 사용되는데 보통 데이터의 id를 이용한다. 만약 데이터에 안정적인 id가 없다면 인덱스를 이용하는 방법도 있는데 최후의 수단으로 사용되며 다음과 같은 조건에서는 사용하지 말라고 권장한다.

• 배열의 각 요소가 static 하며 변하지 않아야 한다.
• 데이터 내부에 쓸 만한 unique값이 없을 경우
• 데이터가 절대 reordered 되거나 filtered되지 않을 경우이다.

나 같은 경우에는 댓글 창 기능을 구현하면서 처음에 key를 부여하지 않아 아래와 같은 경고가 나왔다.

저 경고 문구를 해결하기 위해 처음에는 map을 통해서 index 값을 key 값으로 부여해줬으나 나중에 댓글 삭제 기능을 추가할 계획이 있기 때문에 아래 사진과 같이 counter 변수를 주고 후위연산자를 사용해 key 값을 주었다.

리액트는 키가 동일할 경우 동일한 돔 요소를 보여준다. 예를 들어 0번째 인덱스 키값을 가진 유저의 댓글이 사라질 경우 댓글은 1번째 인덱스 키값을 가진 유저의 댓글 창으로 한 칸씩 밀릴 수도 있다.
index를 key값으로 사용하면 안 되는 이유
위 링크를 클릭하면 보다 더 자세한 예를 보며 이해할 수 있다.

결론

리스트의 자식들에게 key가 있다면 리액트가 삭제할지 추가할지 식별하는 것을 돕는 역할을 하기에 필요하다.