Key

KEY? 왜 사용해야 할까?

Key는 컴포넌트 배열을 렌더링 할 때 어떤 element에 변화가 있는지 알아내기 위해 사용하는 값이다.

 

조금 더 추가해 설명해보자면, 리액트가 DOM 업데이트를 위해 이전 V-DOM과 현재 V-DOM에 대해 비교 연산하는 과정을 재조정이라고 한다. 이 재조정 과정에서 빛을 발하는 게 key다. 부모 요소에서 여러 자식 요소가 병렬적으로 많이 있을 때, key를 사용하면 이전 자식에 비해 현재 자식 중에 어떤 게 추가되고, 어떤 게 삭제되었는지 정확히 알 수 있다.

 

리액트에서는 데이터의 변화가 잦고 그에 따라서 새로운 컴포넌트를 생성할 수도, 수정할 수도, 삭제할 수도 있다. 이런 상황에서 우리는 key가 없다면 일일이 모든 컴포넌트를 순차적으로 탐색하며 변화가 있는 컴포넌트를 찾아내야 한다. 하지만 key를 부여하면 하나의 컴포넌트를 고유하게 식별할 수 있으므로 더 빠르게 어떤 컴포넌트에 변화가 일어났는지 감지할 수 있다.

 

따라서 key 값은 고유해야 한다. 만약 해당 원소를 고유하게 판별할 수 있는(ex. id ...) 값이 있다면 해당 값을 key로 사용하는 게 좋다.

 

{stations.map((station) => (
  <StationItem key={station.id}>
    {station.name}
  </StationItem>
))}

 

배열의 index를 key값으로 사용할 수는 있으나, 이는 안티 패턴이다.

🤔 왜 배열의 index를 key로 사용하면 안 될까?

배열의 index를 key로 사용하면 일단은 개발자 도구의 콘솔 화면에서 warning이 사라지면서, 우리는 잠시 안심할 수도 있다. 하지만 이런 상황에서는 우리도 모르게 화면에 잘못된 데이터를 표시하고 있을 수도 있다.

 

왜냐하면 배열의 순서는 언제든 변할 수 있기 때문이다. 배열은 어느 순간 새로운 원소를 추가할 수도(심지어 어느 자리든지), 삭제할 수도 있다. 그렇게 되면 index = 1이었던 <FirstComponent>는 어느 순간 index = 32 일 수도 있는 것이다.

 

key라는 값은 어느 순간이던 나만의 컴포넌트를 식별할 수 있는 고유한 값이어야 한다. 그런데 index를 key값으로 두면 예상치 못하게 key값이 코드에 의존하게 되면서 계속 변한다. 즉, 하나의 컴포넌트를 고유하게 식별한다고 할 수 없다.

 

 

출처

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318