📚 Reference

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)만큼의 계산 복잡도를 가진다.
화면을 그릴 때마다 이러한 계산은 비효율적이고 화면 렌더링을 오히려 느리게 만들 수도 있겠다.