리스트 순서를 관리하는 key props

읽기 전에

본 글은 React의 컴포넌트 key props 개념을 처음 공부하는 Frontend 초보 개발자를 위한 글입니다.

"react": "^18",

React에서 key props

React 를 이용해서 프로그래밍을 하다보면 map메서드를 사용하다보면 아래와 같은 오류를 본 경험이 한번 정도 있으실 겁니다.

이 오류는 map으로 생성한 컴포넌트에 key props를 지정하지 않았을 때 발생합니다.

그렇다면 key props는 뭘까요?

key props는 React 가 리스트의 각 항목을 고유하게 식별할 수 있도록 돕는 속성입니다. 대표적으로 배열의 각 요소를 컴포넌트로 변환해 렌더링할 때 사용하는 map 메서드에서 정말 많이 사용하고, 그 외에 배열과 연관있는 filter, reduce 메서드에서도 사용됩니다.

key props를 통해 요소가 추가되거나 삭제될 때 React는 어떤 부분을 업데이트해야 하는지 정확하게 파악하여 성능을 최적화할 수 있습니다.

위의 오류는 React 입장에서는 변경 사항을 정확히 알 수 없어 모든 요소를 다시 렌더링 해야해 성능적으로 비효율적인 작업을 거치게 되어서 React는 key를 설정하는것을 권장 하고 있습니다.

import React from 'react';

const people = [
  { id: 1, name: '진우' },
  { id: 2, name: '동민' },
  { id: 3, name: '우희' },
  { id: 4, name: '지은' },
  { id: 5, name: '아정' },
];

function PeopleList() {
  return (
    <div>
      <h1>사람 목록</h1>
      {people.map(person => (
        <div key={person.id}>
          {person.name}
        </div>
      ))}
    </div>
  );
}

export default PeopleList;

이번엔 map메서드를 이용해서 people 배열을 컴포넌트로 반복 렌더링하는 예시 코드를 작성해 보았습니다. 여기서 key={person.id} 부분이 바로 key props입니다. React에서는 key값을 활용해 각각의 요소가 고유함을 인식하고, 데이터가 변경될 때 어떤 요소를 업데이트할지 정확하게 파악할 수 있습니다. 그리고 이렇게 배열의 항목을 식별하며 Virtual DOM이 효율적으로 작동하도록 도와줍니다.

key에 index값을 주면 좋은거 아닌가?

그럼 key값을 설정하는걸 권장한다면 편하게 key에 map 메서드가 제공하는 index값을 주면 좋은거 아닐까요?

import React from 'react';

const people = [
  { id: 1, name: '진우' },
  { id: 2, name: '동민' },
  { id: 3, name: '우희' },
  { id: 4, name: '지은' },
  { id: 5, name: '아정' },
];

function PeopleList() {
  return (
    <div>
      <h1>사람 목록</h1>
      {people.map((person, index) => (
        <div key={index}>
          {person.name}
        </div>
      ))}
    </div>
  );
}

export default PeopleList;

key값에는 index값을 사용하는것을 React 공식 문서에서는 권장하지 않고있습니다. 전 그것도 모르고 신나게 썼습니다. 왜냐하면 우선 인덱스는 배열의 순서를 의미합니다. 이 때 요소가 추가되거나 삭제된다면 인덱스가 변경되면서 React 가 기존 요소와 새 요소를 구분하기 어려워집니다.

그리고 React 는 key를 통해 리스트의 각 요소를 고유하게 식별하여 필요한 부분만 업데이트하는데, 인덱스를 사용하면 순서가 바뀔 때마다 새로운 요소로 인식하게 되어 불필요한 재렌더링이 발생할 수 있습니다.

특히, 리스트가 동적으로 변경되는 상황(예: 요소 추가, 삭제, 정렬)에서는 인덱스를 key로 사용하면 UI가 예상치 못하게 렌더링될 수 있습니다. 따라서 key는 항목을 고유하게 식별할 수 있는 값을 사용하는 것이 중요합니다.

key에 어떤값을 주는게 적절한건가?

key로 적절한 값을 선택하는 기준은 리스트 내에서 각 요소를 고유하게 식별할 수 있는 값이라면 뭐든 좋습니다.

하지만 순서나 내용이 값이 동적이고 중복이 될 가능성이 있는 값들은 사용하지 않는게 좋습니다.