React 공식문서 - Rendering Lists(목록 렌더링)

데이터 모음에서 유사한 컴포넌트를 여러 개 표시할 때, JavaScript의 배열 메서드를 사용할 수 있다.

 

---

Rendering data from arrays(배열에서 데이터 렌더링하기)

 

서로 다른 데이터를 사용해서 동일한 컴포넌트의 여러 인스턴스를 표시할 떄, 해당 데이터를 JavaScript의 객체와 배열에 저정하고 map() 및 filter()와 같은 메서드를 사용해서 컴포넌트 목록을 렌더링할 수 있다.

 

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

위와 같이 코드를 작성하게 되면 아래와 같은 콘솔 오류가 표시된다.(해결 방법은 아래에서 기술)

Warning: Each child in a list should have a unique “key” prop. 
경고: 목록의 각 자식에는 고유한 “key” prop이 있어야 합니다.

---

Filtering arrays of items(항목 배열 필터링하기)

 

JavaScript의 filter() 메서드를 사용해서 필요한 데이터만 포함된 새로운 배열을 만들어 렌더링할 수도 있다.

---

Keeping list items in order with key(key로 목록의 항목 순서 유지하기)

 

위 예제에세 발생한 콘솔 오류을 해결하기 위해서는 해당 배열의 항목들 사이에서 고유하게 식별할 수 있는 문자열 또는 숫자인 key를 부여해야한다.

 

key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에게 알려주고, 배열 항목이 이동, 삽입, 삭제되는 경우, DOM 트리를 올바르게 업데이트할 수 있게 해준다.

 

* key는 즉석에서 생성하는 대신 데이터에 포함시켜야 한다.

 

* 목록의 각 항목에 여러 개의 DOM 노드 표시하기

<></> 구문으로는 key를 전달할 수 없으므로 단일 <div></div>나 <Fragment></Fragment>로 그룹화해서 key를 전달해야 한다.

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

---

Where to get your key(key를 얻을 수 있는 곳)

 

데이터베이스의 데이터 : 고유한 데이터베이스 key/ID를 사용할 수 있다.

로컬에서 생성된 데이터 : crypto.randomUUID() 또는 uuid와 같은 패키지를 사용할 수 있다.

---

Rules of keys(Key 규칙)

 

- key는 형제간에 고유해야 한다.(다른 배열의 JSX 노드에는 동일한 key를 사용해도 된다.)

- key가 변경되지 않아야 한다.

---

Why does React need keys?(React에 key가 필요한 이유는 무엇일까요?)

 

key를 사용하면 형제 항목 사이에서 특정 항목을 고유하게 식별할 수 있고, 재정렬로 인해 어떤 항목의 위치가 변경되더라도 해당 항목이 사라지지 않는 한, React는 key를 통해 그 항목을 식별할 수 있다.

 

* 개발자가 key를 지정하지 않으면, React는 배열의 인덱스를 key로 사용한다. 하지만, 배열의 인덱스를 key로 사용하면 배열의 순서가 바뀌는 등에 따라 변경될 수가 있기 때문에 종종 예기치 못하는 버그를 발생시킬 수 있다.

 

* key={Math.randon()}과 같이 즉석에서 key를 생성하게 되면, 렌더링될 때마다 key가 일치하지 않아 매번 모든 컴포넌트와 DOM이 다시 생성되기 때문에 속도도 느려지고 목록 항목 내부의 사용자 입력도 손실될 수 있다.

 

* 컴포넌트는 key를 prop으로 받는 것이 아닌, React 자체에서 힌트로만 사용된다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)