[React]-리스트와 Key

본문 내용은 React Document 를 바탕으로 작성 되었다.

리스트와 Key

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

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

위와 같이 number list 를 표현 할 수 있다.

다만, 주의 해야 할 점은 위의 <li> 를 나타내는 부분에서

...
<li>{number}</li>
...

위 와 같이 key값이 없이 작성을 하게 되면 각 항목에 key 를 넣어야 한다는 경고가 표시된다. key는 엘리먼트 리스트를 만들 때 포함해야하는 특수한 문자열 어트리뷰트 이다. 아래 key 장에서 왜 필요한지 자세하게 알아보도록 하겠다.

---

Key

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

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것 이다.

하지만 항목의 순서가 바뀔 수 있는 경우 Key에 인덱스를 사용하는건 권장하지 않는다.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다.Robin Pokorny’s가 작성한 글인 인덱스를 key로 사용할 경우 부정적인 영향에 대한 상세 설명 을 참고하자.

예시 : 올바른 Key 사용법

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    // key에 number(value 값) 이 오면 안됩니다!
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

참고

• key는 다른 상황에서도 사용할 수 있다. React는 React DOM이 변경되면 이전과 비교해 변한 부분만 다시 렌더링 한다.
• 이때 key는 인스턴스(컴포넌트) 들을 구분하게 해주는 identity 가 될 수 있다. (key는 React가 제공하는 특수한 프로퍼티임)
• 따라서 key가 달라지면 react는 새로운 노드로 인식하게 되고 렌더링을 다시 하게 된다. 자세한 설명은 해당 블로그 의 Uncontrolled Component 부터 살펴보자.
• 이걸 잘 활용하면 노드들을 초기화 하는데 더 효율적으로 작동하게 할 수 있다.

---

JSX에 map() 포함 시키기

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}