[매일메일] React에서 index를 key값으로 사용하면 안되는 이유(FE.250109)

React의 key란 무엇인가?

• 리스트를 랜더링 할 때 엘리먼트를 구분하는 고유 식별자 역할
• 어떤 항목이 변경(추가, 삭제, 정렬 변경)되었는지 효율적으로 파악하고, 필요한 부분만 다시 렌더링함

React의 index란?

• 배열을 순회하며 리스트를 랜더링할 때(.map), 현재 요소가 몇 번째인지 나타내는 정수 값

const fruits = ['Apple', 'Banana', 'Orange'];

const fruitList = fruits.map((fruit, index) => {
  return (
    <li key={index}>
      {fruit} (index: {index})
    </li>
  );
});

간단하게 구현하는 경우에는 이처럼 key에 index값을 쓰곤 하는데, 사실 이러면 문제가 생길 수 있다.

 

• React의 리스트에서 index를 key값으로 설정하면 안되는 이유
  
  • 항목의 순서가 바뀔 때 렌더링 문제 발생할 수 있음.
    • 배열의 순서를 바꾸거나, 중간에 요소를 추가/삭제하면 기존 index와 새 index가 일치하지 않음
    • React는 key를 기준으로 어떤 엘리먼트가 변경되었는지 파악함. 이 기준 값이 변경되는 문제가 생기는 것.
    • 동일한 항목임에도 중간 항목 변경으로 index가 바뀌면서 key에도 영향을 주어 불필요한 재랜더링이 발생.
  • 컴포넌트 상태 관리에 문제가 생길 수 있음
    • React는 key가 바뀌면 새로운 컴포넌트로 인식해, index가 바뀌면 기존 컴포넌트의 state가 리셋될 수 있음
  • 의미있는 고유 식별자가 아님
    • index는 배열 내에서 순서를 나타낼 뿐, 항목의 고유값이 아님

 

• 그럼 무엇을 key값으로 써야 하는가?
  
  • 서버에서 받아온 데이터 값에 고유한 식별자가 있다면 이를 key값으로 쓰는 것이 가장 좋음
  • 데이터가 삽입되거나 삭제 되어도, 각 항목에 맵핑된 id 같은 고유 값은 변하지 않기 때문

function UserList() {
  const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 },
  ];

  return (
    <ul>
      {users.map((user) => (
        // 고유한 id를 key로 사용
        <li key={user.id}>
          {user.name} - Age: {user.age}
        </li>
      ))}
    </ul>
  );
}

export default UserList;

 

 

---

출처

1. 매일메일 25.01.09. 42번 문제. 리액트에서 index를 key값으로 사용하면 안되는 이유. https://maeil-mail.kr

2. react 배열의 index를 key로 쓰면 안되는 이유. (예시를 직접 ui로 보여줘서 이해가 잘됨)

https://medium.com/sjk5766/react-%EB%B0%B0%EC%97%B4%EC%9D%98-index%EB%A5%BC-key%EB%A1%9C-%EC%93%B0%EB%A9%B4-%EC%95%88%EB%90%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3ce48b3a18fb