[React] map 함수 사용 시 Key 값을 부여해 주는 이유

Keys

React는 효율성을 높이기 위해 key 속성을 지원한다. key를 통해 기존 트리와 비교하여 업데이트 이후 트리의 자식들과의 일치 여부를 확인하고 변경한다.

 

---

 

간단한 list를 map함수를 사용하여 예제를 들어보자!

 

const Tooo1 = () => {
  const m = [1, 2, 3, 4];
  return (
    <>
      {m.map((v, i) => (
        <div>{v}</div>
      ))}
    </>
  );
};

export default Tooo1;

위 코드를 실행하면 다음 결과가 나온다.

 

 

너무 당연한 결과다. 정상적으로 코드가 실행되었다!!

그렇지만 브라우저에서는 경고를 보내고 있다.

 

경고의 원인은 map함수에 key 값을 안 넣어서 그렇다.

 

 

Key 값을 왜 넣어야 할까?

우선 key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와준다. React는 업데이트 요소들을 기존의 요소들과 비교 후에 변경하는데 이때 Key로 식별한다. Key는 해당 엘리먼트에 안정적인 고유성을 부여해주고 그 고유성을 비교하여 렌더링을 효과적으로 수행한다.

 

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

React는 기본적으로 동시에 두 리스트를 순회한다.

그리고 그 둘을 비교하여 차이가 있으면 업데이트를 하는데 위 코드에서는 마지막에 third 자식만 추가하면 업데이트가 종료된다. 그렇지만 다음과 같은 경우라면 어떨까?

 

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

마지막 요소가 변경이 된 것이 아니라 첫 번째 요소에 값이 추가된 경우다.

이 경우 모든 자식을 변경한다. 굉장히 비효율적이다.

 

 

 

 

이러한 비효율적인 문제를 단지 Key 값을 부여함으로써 해결할 수 있다.

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

Key 값을 가지고 있다면 트리 변환 작업이 효율적으로 수행되도록 할 수 있다.

Key 값을 가지고 있다면 기존의 값과 Key를 비교하여 모든 값 갱신이 아닌 '2014' Key를 가진 엘리먼트만 추가한다.

 

 

 

React에서 Key 값은 고유한 값으로 사용하는 것을 지향한다.

 

 

---

 

위 예시로 들었던 코드에 Key 값을 부여해보자 

 

const Tooo1 = () => {
  const m = [1, 2, 3, 4];
  return (
    <>
      {m.map((v, i) => (
        <div key={v.toString()}>{v}</div>
      ))}
    </>
  );
};

export default Tooo1;

브라우저에서도 더 이상 경고를 보내지 않는다.

 

 

 

---

 

Key 값을 어떻게 사용해야 할까?

React map에서 Key는 같은 map 형제에서 고유한 값이어야 한다.

꼭 전체 범위에서 고유할 필요는 없다!!

 

 

 

 

 

참고사이트

React 공식문서

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!