[React] List 및 key의 개념, map()함수, key의 사용목적은 렌더링 효율에 있다.

STEP 1. List와 Key

일상생활에서 우리가 사용하는 키로는 주민등록번호, 학번, 핸드폰 번호, 여권번호가 있습니다. 모두다 고유하다는 값의 특징을 가지고 있습니다. 하지만 고유하다는 범위가 “대한민국”으로 한정되어 있습니다. 이는 특정 범위에서 고유하다는 말입니다.

리액트에서는 고유하다는 것(고유성)을 “key”로 나타내며 이는 고유한 문자열입니다. 리액트에서의 특정 범위는 “List” 입니다. List는 key를 가지며 이는 ⭐List에서 어떤 아이템의 변경, 추가, 제거의 구분을 위해 사용합니다. 즉, 서로 다른 List에서 key값이 같더라도 영향이 없음을 말합니다.

List 내에서만 고유한 값이면 됩니다.

STEP 1-2 예시코드

코드는 키값으로 숫자의 값을 사용합니다. 현재는 numbers 값에 중복이 없기 때문에 정상적인 동작을 하지만 만약 numbers값에 중복된 숫자가 들어가면 고유해야한다는 키값의 조건을 만족하지 않습니다. 따라서 중복된 값이 들어갔을 때는 고유한 키로서 사용하면 안됩니다. 중복된 값이 들어간 경우 키값이 중복된다는 경고 메시지가 출력됩니다.

todo.id가 가리키는 바가 사용자 id 또는 고유한 id 값이라면 key로 사용하기 적절합니다.

키값으로 인덱스를 사용하는 방법이 있습니다. map()함수에서 두 번째 파라미터로 제공해주는 인덱스 값을 키값으로 사용하는 방법입니다.

이 index는 배열 내에서의 인덱스를 의미합니다. 인덱스도 고유한 값이기 때문에 키값으로 사용해도 되지만 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 키값으로 인덱스를 사용하는 것은 권장하지 않습니다.

성능에 부정적인 영향을 끼칠 수 있고, 컴포넌트의 state와 고나련하여 문제를 일으킬 수도 있기 떄문입니다. 따라서 인덱스를 키값으로 사용하는 것은 아이템들의 고유한 아이디가 없을 경우에만 사용하는 것이 좋습니다.

참고로 리액트에서는 키를 명시적으로 넣어주지 않으면 기본적으로 이 인덱스 값을 키값으로 사용합니다.

정리

⭐ “꼭 기억해야하는 것은 map() 안에 있는 엘리먼트는 꼭 키가 필요하다는 것입니다."
React는 화면이 렌더링 될 때, Virtual DOM과 DOM의 값을 비교하게 되는데 List의 경우 key값으로 비교하여 렌더링 효율을 높입니다. 즉, 값의 추가/변경/제거 됐을 때만 React가 렌더링하게 됩니다.