[React] map 함수로 반환되는 컴포넌트에 부여된 key 값의 역할

React로 프론트엔드를 개발하다 보면 map 함수를 사용해 배열 요소를 렌더링 해야 하는 경우가 있다.

이때 map 함수는 배열의 element 뿐만 아니라 index 값을 파라미터로 전달한다.

const array = [
  {id:1, content: 1},
  {id:2, content: 2},
  {id:3, content: 3},
  {id:4, content: 4}
];

array.map((element, index) => (
  <span key={index}>{element.content}</span>
));

map 함수로 return 하는 컴포넌트에는 key 값을 지정해줘야 하는데, 이때 위처럼 key 값에 단순히 index 값을 전달하는 경우 렌더링 오류가 발생할 수 있다.

React는 기본적으로 리랜더링을 할 때 Virtual DOM을 만들어 실제 DOM과 비교한 뒤 데이터가 변경된 컴포넌트가 있으면 해당 부분만 변경하여 효율적으로 리랜더링을 진행하는 방식으로 작동한다.

이때 map 함수는 key값을 이용하여 해당 컴포넌트에 들어가는 데이터 값이 바뀌었는지 아닌지 판단하는데, 이때 단순히 index 값을 전달할 경우 다음과 같은 상황에서 렌더링 오작동이 발생할 수 있다.

const [page, setPage] = useState(1);

const array = [
  {id:1, content: 1},
  {id:2, content: 2},
  {id:3, content: 3},
  {id:4, content: 4}
];

array.slice(2 * (page - 1), 2 * page).map(
  (element, index) => (
  <span key={index}>{element.content}</span>
));

만약 pagination 기능을 사용해 page 변수를 1에서 2로 업데이트 했을 때, 위 map 함수에서 return 하는 컴포넌트 값은 바뀌지 않는다.

이 이유는, slice로 array를 2개씩 잘랐을 때 array의 뒷 두 element의 key 값에 다시 index 값이 부여되면서 React는 해당 컴포넌트에 변동 사항이 없어서 리렌더링을 진행하지 않아도 된다고 판단하기 때문이다.

따라서 앞으로 map 함수를 사용하여 컴포넌트를 렌더링 하는 경우, element에 id와 같은 고유값이 있으면 해당 값을 부여해주는 것이 좋다.

const [page, setPage] = useState(1);

const array = [
  {id:1, content: 1},
  {id:2, content: 2},
  {id:3, content: 3},
  {id:4, content: 4}
];

array.slice(2 * (page - 1), 2 * page).map(
  (element, index) => (
  <span key={element.id}>{element.content}</span>
));