[React] key를 사용해야하는 이유

React에서 map함수를 다루다 보면 key를 사용하지 않을 시 warning을 만나게 된다.

 

key사용은 왜 하는걸까?

 

이것은 가상돔의 렌더링 과정과 관련이 있다.

 

key는 react의 가상 돔에서 어떤 항목을 변경하고 추가, 삭제할지 식별하는 것을 도와준다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위함이여 배열 내부의 엘리먼트에 지정해주어야 한다.

리액트는 가상돔으로 이전 가상돔과 차이가 있는 부분을 찾아서 변경하는데 그 기준은

재 조정 알고리즘을 통해 정하게 된다.

 

재조정 알고리즘에는 두가지 가정이 있는데

 

1. 엘리먼트 타입이 다를 경우

 - 루트엘리먼트를 비교하여 타입이 다를 경우엔 루트엘리먼트 전체를 새로 구축

 - 같은 타입의 루트엘리먼트에서 속성이 다를 경우 다른 부분만 다시 갱신

2. key값이 다를 경우

 

자세한건 아래의 React 문서를 확인해보자

https://ko.reactjs.org/docs/reconciliation.html

 

map함수를 쓸 경우 같은 엘리먼트를 반복하여 사용하기 때문에 엘리먼트 타입으로 차이를 비교할수 없기 때문에
고유한 값을 key속성에 부여함으로써 리액트가 이전 가상돔과 차이를 쉽게 계산할 수 있다.

보통 데이터의 id값을 key값으로 부여하지만 map()의 두번 째 인자인 index를 사용하기도 한다.

하지만 인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생한다.

재배열 될 경우 각 배치된 index가 변경되기 때문이다.
index를 key값에 넣는 방법은 고유한 값이 없을 경우 최후의 수단으로 사용해야한다.

 

즉 key는 변하지 않고 예상 가능하며 유일한 값으로 설정 해주어야한다.