React 와 keys

JJ_Dean·2022년 12월 22일
0

React

목록 보기
5/14
post-thumbnail

keys 란?


다음과 같이 map으로 컴포넌트를 여러번 실행하여 UI 요소를 여러개 생성하는 JSX 코드가 있다고 가정하자.

오류 상황

이 코드로 여러개의 요소를 생성하면?

Warning: Each child in a list should have a unique "key" prop.

모든 자식에는 유일한 "key" prop이 필요하다는 오류가 발생한다.

실행된 페이지에서 이 결과물에 새로운 아이템을 추가해보니(새로운 요소는 항상 맨 위에 위치하도록 설정해놨다.) 요소가 딱 하나 추가되는데 기존에 있던 모든 요소들이 일사불란하게 움직이는 것을 확인했다.

또 새로 추가될 아이템이 특정 State를 가지고 있다면 새로운 아이템이 이전 아이템을 덮어쓰는 오류가 있음을 확인했다.

왜 그런 것일까? React의 실행 과정을 보면 다음과 같다.

새로운 아이템을 추가한다. ➡
React는 이 새로운 아이템을 목록의 마지막 아이템으로 렌더링한다. ➡
기존에 있던 아이템과 새로운 아이템 모두를 업데이트해서 컨텐츠의 순서를 변경한다. ➡
내가 설정해둔 배열의 순서(추가 후 아이템의 순서)와 일치한다.

React는 여러개의 같은 요소들이 생겨날때 이 요소들이 비슷해보이고, 배열에 아이템이 늘어난 것만 보았기 때문에 이러한 일이 일어난다.

해결 방안

이 목록에 2, 3개 아이템만 있다면 추가하고, 전부 다 검사하고, 재배치 하는데 시간이 많이 걸리지 않겠지만 아이템이 수천, 수만개라면 이는 성능 저하로 이어질 것이다. 따라서 요소들 마다의 'Key' prop을 넣어주어 React가 각각의 컴포넌트를 식별할 수 있게 해준다.

각각의 컴포넌트에 유니크한 key 값을 넣어주게 되면 React는 데이터가 추가된 후 크기가 커진 데이터 배열을 인식하고 추가적으로 아이템들이 위치해야 할 곳까지 인식한다.

실제로 새로운 아이템을 추가해보니 새롭게 추가되는 동작만 할 뿐, 기존의 요소들의 값이 바뀌지 않았다.

profile
공부하고 내 것으로 만들자.

0개의 댓글