배열 렌더링에서 Key의 역할

배열 렌더링

동적인 배열을 렌더링할 때 map() 함수를 사용한다. map() 함수는 배열 안에 있는 각 원소를 변환하여 새로운 배열을 만들어준다.

간단하게 배열의 모든 원소를 렌더링할 수 있다. 하지만 우린 이러한 콘솔창에서 이러한 오류창을 만나게 된다.

이러한 경고 메세지가 뜨는 이유는, 각 고유 원소에 key가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링이 되기 때문이다.

리액트에서 배열을 렌더링 할 때에는 key라는 props를 설정해줘야 한다. key값은 각 원소들마다 가지고 있는 고유 값으로 설정해야 한다.

<div>
  {arr.map(item => (
  	<div key={고유한 값}>item</div>
  )}
</div>

Key의 역할

• key값이 없다면 배열의 요소 사이에 새로운 요소를 추가할 때, 리렌더링 시에 새로운 요소가 삽입이 되지 않고 기존의 값들이 바뀐다.

• 하지만 key가 있다면, 배열이 업데이트 될 때, key가 없을 때처럼 비효율적으로 업데이트 하는 것이 아니라 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제할 수 있다. 때문에 고유한 key값이 있는 것이 중요하다.

강의출처 - 벨로퍼트와 함께하는 모던 리액트