[React] JSX Key 속성 이해하기

map 메소드 사용해서 데이터 나열하기

    <div>
      {todoData.map((data) => (
        <div style={listStyle} key={data.id}>
          <input type="checkbox" defaultChecked={data.completed} />
          {data.title}
          <button
            style={btnStyle}
            onClick={() => {
              handleRemove(data.id);
            }}

            X
          </button>
        </div>
      ))}
    </div>

만약 key 속성을 넣지 않는다면?

아래와 같은 에러가 발생하게 된다.
->Warning: Each child in an array or iterator should have a unique "key" prop ...

그렇다면 JSX Key 속성은 무엇인가?

React에서는 요소의 리스트를 나열할 때 Key 값을 넣어줘야한다.
Key는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 Key를 제공해야한다!

React는 가상 DOM을 이용해 바뀐 부분만을 실제 DOM에 적용하는 데 이때 어떻게 바뀐 부분을 찾을까?
->바로 Key를 이용해서 어떤 부분이 바뀌었는지 인식하게된다.