React의 리스트 렌더링과 키 관리

 

React에서 리스트와 키는 컬렉션을 효율적으로 렌더링하고 관리하는데 중요한 개념이다.
리스트와 키를 올바르게 사용하면 React 애플리케이션의 성능을 크게 향상시키고, 더욱 효율적인 데이터 렌더링 및 관리가 가능해진다.

리스트는 여러 데이터 항목을 표시할 때 사용되며, 각 항목에는 고유한 키가 필요하다.

 

리스트를 렌더링하기 위해, React에서는 map() 함수를 자주 사용한다.
이 함수는 배열의 각 요소에 대해 함수를 실행하고, 결과를 새 배열로 반환한다.
React에서는 이 패턴을 사용하여 데이터 배열을 컴포넌트 배열로 변환할 수 있다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

return (
  <ul>{listItems}</ul>
);

 

React에서 키는 컴포넌트 배열을 렌더링할 때 각 요소를 식별하는 데 사용된다.
키는 고유해야 하며, 이를 통해 React는 어떤 항목이 변경, 추가 또는 삭제되었는지 파악할 수 있다.
(키를 제공하면 React의 리렌더링 성능이 향상된다)

일반적으로 데이터 항목의 고유 ID를 키로 사용한다.
(배열의 인덱스를 키로 사용하는 것은 권장되지 않는다. 인덱스를 키로 사용하면 배열의 순서가 바뀔 때 성능 문제가 발생하거나 컴포넌트 상태에 문제가 생길 수 있기 때문)

const todoItems = todos.map((todo) =>
  <li key={todo.id}> // 각 todo 항목의 id 속성이 고유한 키로 사용된다.
    {todo.text}
  </li>
);

return (
  <ul>{todoItems}</ul>
);

---

주의사항 >>

 

키는 형제 요소 사이에서만 고유해야 한다.
React는 키를 사용하여 배열이나 리스트의 어떤 항목이 변경, 추가, 삭제되었는지를 감지한다. 이 때, 키는 같은 리스트 내의 다른 항목과 구별되어야 한다. 전역적으로 고유할 필요는 없다.

 

키는 React에 의해 사용되므로 컴포넌트의 props 로 전달되지 않는다.
키는 React에 의해 내부적으로 사용되는데, 이는 컴포넌트가 렌더링 될 때 React가 어떤 요소가 변경되었는지 식별하는 데 도움을 준다.
그러나 키는 props 의 일부로 컴포넌트 내부에 전달되지 않는다.
(즉, 컴포넌트 내부에서 this.props.key 와 같은 방식으로 키에 접근할 수 없다)

 

리스트 아이템에만 키를 적용해야 한다.
키는 각각의 리스트 항목을 식별하는 데 사용되며, 리스트 항목을 감싸는 컨테이너나 부모 요소에 키를 적용해서는 안 된다.