Lists and Keys

Lists와 Key

List	Key
목록 / 같은 아이템을 순서대로 모아 놓은 것	열쇠 / 각 객체나 아이템을 구분할 수 있는 고유한
JS에서는 List를 위해 Array를 사용	아이템을 구분하기 위한 고유한 문자열

const numbers = [1, 2, 3, 4, 5];

여러개의 Component 렌더링하기

엘리먼트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있습니다.
아래의 JavaScript map() 함수를 사용하여 numbers 배열을 반복 실행합니다.
각 항목에 대해 <li> 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장합니다.

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

ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById('root')
);

 

 

https://codepen.io/gaearon/pen/GjPyQM?editors=0011

List of Numbers

 

기본적인 List Component

function NumberList(props) {
  const { numbers } = props;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList number={numbers} />,
    document.getElementById('root')
);

 

위 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. 

 

List의 Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

 

 

// Key로 값을 사용하는 경우
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

// key로 id를 사용하는 경우
// Key를 선택하는 가장 좋은 방법
// 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다.
// 대부분의 경우 데이터의 ID를 key로 사용합니다.
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

// key로 index를 사용하는 경우
// 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.
// index 순서 변경가능한 경우 권장되지 않으며
// 이로인해 성능 저하나 state 관련 문제 야기할 수 있음
const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

 

 

Map() 함수 안에 있는 Elements는 꼭 key가 필요하다!

---

 

Referenced By

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

https://ko.legacy.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React