리스트와 Key

key

• key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

Key로 컴포넌트 추출하기

function ListItems(props) {
  return <li>{props.value}</li>
}

function NumberList(props) {
  const numbers = props.numbers;
  

  const listItems = numbers.map((number) => 
    <ListItems key={number.toString()} value={number} />
   //<li key="1">1</li>                               
   //<li key="2">2</li>
   //위 값들이 listItems에 들어감                               
  );
  return (
    <ul>{listItems}</ul>
 )                              
}
//const listItems = numbers.map((number) => <li>{number}</li>);
//[<li>1</li>, <li>2</li>, <li>3</li>, <li>4</li>, <li>5</li>]



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

기본 리스트 컴포넌트

• 일반적으로 컴포넌트 안에서 리스트를 렌더링한다.

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

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

리스트와 Key Q&A

---

• 컴포넌트에서 배열의 갯수만큼 엘리먼트를 렌더링하고자 할 때, 어떤 방법으로 렌더링할 수 있나요?

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

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

• 컴포넌트에서 배열의 갯수만큼 엘리먼트를 렌더링할 때에 발생하는 경고의 의미는 무엇이며, 어떻게 해결할 수 있나요?
  • 리스트 각 항목에 key를 넣지 않아서 발생하는 문제
  • 각 리스트에 키를 넣어주면 해결된다.

• 왜 이런 경고가 발생하는 걸까요?
  • 리스트 각 항목에 key를 넣지 않아서 발생하는 문제인데, 각 리스트들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다.
    왜 키가 필요한가 링크