리액트에서 배열을 렌더링 할 때는 key라는 props를 설정해야 한다.
key 값은 각 원소들마다 가지고 있는 고유값으로 지정 해야 한다.
key 설정을 하지 않는다면?
기본적으로 배열의 index값을 key로 사용하게 되고, 경고메시지가 뜬다.
왜 key props를 설정해주라고 하는 걸까?
각 고유 원소에 key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다.
💎 key props를 지정하는 방식
내가 사용해본 방식을 중심으로 정리해보았다.
🔹 데이터 자체의 고유값
데이터가 가지고 있는 고유값으로 지정하는 것이 가장 이상적인 방식이다.
아래에는 고유값이 없을 때 대체할 수 있는 방법이 궁금해 사용해보았던 것들을 정리해보았다.
🔹 uuid 라이브러리
데이터에 자체 식별자로 사용할 수 있는 값이 없을 경우에 대체할 방법이 궁금해서 사용해봤다.
단점
렌더링 시마다 고유값을 새로 생성해 부여하기 때문에, key props로 사용하기에 적절하지 않다는 말을 들었다. 이 부분에 대해서는 나중에 조금 더 자세히 알아봐야겠다.
🔹 map 2nd parameter 사용하기
배열안의 원소가 가지고 있는 고유한 값이 없다면 map()함수를 사용할 때 설정하는 콜백함수의 두번째 파라미터 index를 key로 사용하면 된다.
단점
결국 key를 인덱스로 지정하는 것인데, 이것은 좋지 않다.
배열의 index로 key를 사용하면 재배열이 일어날 경우를 생각해보자.
컴포넌트는 key 를 보고 갱신되고 재사용되기 때문에, index를 사용했다면 항목의 순서가 바뀌었을 경우 key값 또한 변경된다. 이는 리액트가 key props를 통해 변경된 요소를 감지하는데 혼란을 가져오기 때문에 좋지 않다.
사용해도 되는 경우
배열의 순서가 바뀌어 key 가 바뀌지 않아 리스크가 없는 다음의 경우
- 배열과 배열의 항목들이 static 하여 변경되지 않는 경우
- 배열의 항목들이 id 값이 없는 경우
- 배열이 절대 재배열되거나 일부가 삭제되지 않는 경우
💎 리액트 렌더링 방식
별도로 포스팅에 정리해두었다. key props를 필요로 하는 이유와 관련이 있으니 Virtual DOM을 사용한 DOM트리 비교 및 리렌더링 과정에 대한 내용은 해당 포스팅을 참고하자.
[React] VirtualDOM
💎 key 존재유무에 따른 업데이트 방식
🔹 key가 없는 경우
[1,2,3,4]라는 배열이 있다고 가정하자.
우리는 map을 사용하여 이 배열의 요소를 매핑하여 생성했다.
그런데, 만약 2와 3요소 사이에 새로운 2.5라는 요소를 삽입한다면 리액트는 어떻게 동작할까?
간단하게 2와 3사이에 넣어주면 좋겠지만, 실제로는 3이 2.5로, 4가 3으로, 마지막에 4가 삽입된다.
벨로퍼트님의 글에 이해하기 쉬운 아주 좋은 자료가 있어 가져왔다.
위 영상 출처 : react.vlpt.us 11- 배열 렌더링 하기
🔹 key가 있는 경우
key가 있다면 리액트는 고유한 값으로 이 요소들을 인식하여 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제할 수 있다.
따라서 배열을 렌더링할 때에는 고유한 key 값이 있는 것이 중요하다.
그렇지 않을 경우 오류 메시지가 콘솔에 나타나게 되며, 업데이트가 제대로 이루어지지 않게 된다.
위 영상 출처 : react.vlpt.us 11- 배열 렌더링 하기
Reference
