React에서 Key Prop가 필요한 이유

React Key Prop

<div className="App">
      {events.map((event) => (
        <div key={event.id}>
          {event.id} - {event.title}
          <button onClick={() => {}}> delete </button>
        </div>
      ))}
    </div>

key properity가 없으면 해당 배열을 나타내는 DOM List의 전체 순서가 변한 것으로 익식하여 모든 배열요소 리랜더링하게 된다.
즉 key가 없으면 리스트를 순차적으로 비교하여 변화를 감지한다.
하지만 key가 존재한다면, 리엑트는 기존 DOM과 비교하여 어떤 요소만 변화가 필요한지 빠르게 찾아낼 수 있다.

결론

React 에서 **key 를 사용하는 이유는 엘리먼트 혹은 컴포넌트의 변화를 효율적으로 감지해 DOM업데이트시 불필요한 연산을 줄이기 위함이다.