key

React에서 collection을 렌더링할 때 엘리먼트와 데이터 사이의 관계를 추적하기 쉽도록 반복되는 각 엘리면트에 key를 추가하는 것이 중요하다.
key는 고유한 ID(이상적으로는 UUID 또는 기타 고유 문자열)를 사용해야 하지만 마지막 수단으로 Array index가 될 수 있다.
key를 사용하지 않으면 collection에 item을 추가하거나 제거할 때 예상치 못한 동작 결과가 발생 할 수 있다.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

render() {
  return (
    <>
      <header>{/* 생략 */}</header>
      <div className="container">
        <form>{/* 생략 */}</form>
        <div className="content">
          {searchResult.length <= 0 ? (
            <div>검색 결과가 없습니다</div>
          ) : (
            // 1
            <ul>
              {/* 2 */}
              {searchResult.map(item) => (
                // 3
                <li>
                  <img src={item.imageUrl} />
                  <p>{item.name}</p>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </>
  )
}

searchResult 배열을 이용해서 li 엘리먼트를 여러 개를 만들었는데 이 때 li 엘리먼트에 key 속성을 추가해야 한다는 것이다.
여기서 다시 가상돔이 나온다.
React 앨리먼트를 가상돔으로 만들고 이전 가상돔과 차이가 있는 부분만 계산해 실제 돔에 반영하면서 렌더링 성능을 올린다고 했다.
트리 비교이기 때문에 O(n^3)만큼의 계산 복잡도를 가진다.
화면을 그릴 때마다 이러한 계산은 비효율적이고 화면 렌더링을 오히려 느리게 만들 수도 있겠다.
그래서 아래와 같이 두 가지 가정하에 재조정(Reconciliation) 알고리즘을 사용한다.
(1) 앨리먼트 타입이 다를 경우와 (2) Key 값이 다를 경우, 각 각 화면을 조정하도록 하는데 O(n)으로 계산 복잡도가 확연하게 줄어든다고 한다.
배열 메서드인 map()을 사용해서인지 메서드의 두번 째 인자인 index를 사용하기도 한다. 그러나 이것은 고유한 값이 없을 경우 최후의 수단으로 고려하고 지양하는 것이 옳다. 성능 저하나 화면이 갱신되지 않는 문제를 내포하기 때문이다.
React는 가상돔의 전/후를 비교해서 최소한의 돔 조작을 하면서 성능을 높인다.