[Next js] key 속성을 왜 넣어줘야 하지?

Next는 React를 기반으로 만들어졌으니

React의 특징을 많이 가진다.

 

React의 특성인 가상 돔을 이용하여

특정 부분만 다시 그려주는 특성은

비슷한 돔이 반복적으로 나타났을 때 (map을 사용하는 경우)

다른 점을 찾기 위해 순차적으로 돔을 확인한다.

이는 속도 저하와 이어질 수 있기 때문에

각 돔의 key 값을 줘 찾을 수 있도록 한다.

 

React에서도 권장하는 사항임.

 

export default function List() {
  let products = ["Tomatoes", "Pasta", "Coconut", 'Apple'];

  return (
    <div>
      <h1 className="title">상품목록</h1>
      <br />
      <div className="list">
        {products.map((item, i) => {
          return (
          // index를 key 값으로 넣는 경우가 많다.
            <div className="list-content" key={i}>
              <h3>{item}</h3>
              <p>
                이것은 물건입니다. 그것에 대한 설명을 이렇게 마구 써놨습니다
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

 

 

key에 index를 넣는 경우가 많지만

컴포넌트의 순서가 바뀔 수 있는 경우에는

성능저하를 일으킬 수 있으므로

주의하도록 하자.

React에서 key의 역할, 컴포넌트를 다시그리는 과정(reconciliation)