리스트와 Key

React에서 배열을 엘리먼트 리스트로 만드는 방식

여러개의 컴포넌트 렌더링

배열의 숫자를 순서없는 리스트 형식으로 보여주는데 key를 넣어야 한다는 경고 표시를 볼 수 있는데 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트이다.

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

[key 어트리뷰트 적용]

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

ReactDOM.render(
  NumberList numbers={numbers} />,
  document.getElementByid('root')
)

Key

• key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
• Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.
• key를 인덱스로 적용할 경우 성능 저하가 발생할 수 있다.