[React] React 시작하기(6) - 리스트와 key

여러 컴포넌트 렌더링하는 가장 간단한 방법!

function ListComponent(){
  const numbers = [1, 2, 3, 4, 5];
  const items = numbers.map((number) => {
    <li>{number}</li>
  });
  
  return (
    <ul>
      {item}
    </ul>
  )
}

하지만 이렇게만 실행한다면 에러가 발생한다.

"key" 는 리스트 엘리먼트를 만들 때 포함해야하는 특수 문자 어트리뷰트이다.

그렇기 때문에 map() 안에서 리스트의 각 항목에 key 값을 할당해 문제를 해결할 수 있다.

 

짠-

function ListComponent(){
  const numbers = [1, 2, 3, 4, 5];
  const items = numbers.map((number) => {
    // 각 li 에 key 를 부여
    <li key={number.toString()}>
      {number}
    </li>
  });
  
  return (
    <ul>
      {item}
    </ul>
  )
}

 

key란?

React 가 어떤 항목을 변경, 추가 또는 삭제할지 구분할 수 있게 돕는다.

key 는 배열 내부 엘리먼트에 고유한 값을 부여해 안정적인 고유성을 부여해 같은 요소들을 다른 요소로 식별 할 수 있게 한다.

 

리엑트는  컴포넌트의 상태가 변경된 경우 새로운 가상돔을 생성해 이전 가상돔과 비교한다.

그리고 차이나는 부분만 계산해 실제 돔에 반영하는 방식으로 렌더링 된다.

 

이전 가상돔과 비교하는 작업을 하며 리엑트 엘리먼트의 type 프로퍼티 값이 다른 경우에만 리엑트가 다른 가상돔으로 인식을 하게 된다.

그 후 이전 가상돔은 삭제 -> 새로운 가상돔으로 교체 의 작업이 이뤄지게 되는 것이다.

 

만약, type 프로퍼티 값이 같은 경우엔 이전 가상돔 유지 -> 차이나는 엘리먼트/값 업데이트 의 작업을 진행한다.

 

배열의 요소로 동일한 컴포넌트 / html 요소를 나타내는 문자열로 JSX 문법을 사용했다면,

해당 요소들은 동일한 type 프로퍼티를 갖게 되어 각 요소들을 구별할 수 없게 된다.