[TIL] 11/18 map 에서 key 가 필요한 이유,

1. map 에서 key 가 필요한 이유

map 으로 컴포넌트를 반복해서 렌더링할 경우, 각 컴포넌트에는 key 값을 넣어줘야 한다. 넣어주지 않아도 에러가 나지는 않지만, 개발자 도구를 열어보면 콘솔창에 " Warning: Each child in a list should have a unique "key" prop " 라는 경고 문구를 확인할 수 있다. 

 

그렇다면 key 는 왜 필요한 걸까?

 

결론부터 말하면 성능 최적화를 위해 필요하다.  

 

리액트는 가상 DOM 을 사용하여 실제 DOM 과 비교하는 방식으로 렌더링 성능을 최적화한다. 리액트는 DOM 을 효율적으로 업데이트하기 위해 실제 DOM 과 비교할 수 있는 가상의 DOM 트리를 만들어 두고, 실제 DOM 과 비교해서 변경된 부분만 실제 DOM 에 반영한다. 이때 리스트를 렌더링할 때 각 항목의 변경 여부를 추적해야 하는데, 이 때 key 값을 사용한다. key 값이 있으면 리액트는 각 항목이 변화했을 때 어떤 항목이 변경되었는지 쉽게 추적할 수 있다. key 값으로 각 항목을 구별해 불필요한 렌더링을 막고 컴포넌트를 재사용해서 성능을 최적화할 수 있다. 

 

key 는 각 컴포넌트를 구별하기 위해 부여하는 값 인만큼 고유한 값을 사용하는 것이 좋다.

가끔 key 값으로 map 의 index 값을 사용하는 경우를 볼 수 있는데, 순회하는 아이템들의 순서가 절대 바뀌지 않는 경우라면 상관없지만 만약 순서가 바뀔 수 있는 상황이라면 항목의 순서가 바뀔 수 있기 때문에 조심해야 한다. 

 

추가로 key 의 값이 변경되면 리액트는 해당 항목을 새로운 컴포넌트라고 생각하기 때문에 이전 컴포넌트를 삭제하고 새로운 컴포넌트를 생성한다. 따라서 key 값을 불필요하게 변경하지 않는 것이 좋다.