[React.js] 8. List 와 Key

이전에 StopWatch를 구현해보면서 현재 시간을 list에 저장하는 기능을 넣은적이 있었다.

이때 list에 값을 담고 그대로 출력하니 리스트의 각항목에 대한 key가 필요하다는 Warning 메세지가 떴었다.

2021.07.21 - [개발/React.js] - [React.js] StopWatch 구현하기

[React.js] StopWatch 구현하기

 

 

이유는 React.js 자체에서 엘리먼트에 안정적인 고유성을 부여하기 위해 배열내부의 엘리먼트에 지정해야한다고 한다.

 

아래와 같이 map의 key값을 써주면 된다.

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

 

고유한 ID를 부여하기 힘든 경우에는 index를 key값으로 사용할 수 있다.

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

 

중괄호를 이용하여 map() 함수의 결과를 인라인으로 처리할수도 있다.

하지만 이런 경우 너무 많은 인라인코드가 발생하므로 적절하게 사용하는 것이 좋다.

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