[React] React key

 

 

 

 

React key

 

 

🔑 React에서 key의 역할

 

 

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도우며,

배열의 element에 고유성을 부여하기 위해 배열 내부의 eliment에 key를 지정한다.

 

key는 문자열을 사용하는 것이 좋으며 대부분의 경우 ID를 key로 사용하지만

안정적인 ID가 없다면 최후의 수단으로 각 element의 index를 key로 사용할 수 있다.

 

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

 

 

 

🔑 React에서 key를 사용해야 하는 이유

 

 

 효율적인 DOM 트리 구조 구축 및 렌더링 성능을 위해 💡

 

 

React의 가상 DOM 트리 비교 알고리즘은 아래의 두 가지 가정을 기반으로 한다.

 

📌 서로 다른 타입의 두 element는 서로 다른 트리를 만든다.

📌 key prop을 이용해서 여러 렌더링 사이에서 어떤 자식 element가 변경되지 않아야 할지 표시할 수 있다.

 

element의 타입이 다른 경우에는 트리 전체를 재구축하지만,

element의 타입이 같은 경우에는 두 element의 속성을 동시에 확인해서 동일한 내역은 유지하고 변경된 속성들만 갱신한다.

ex) className이 변경되면 className만 갱신하고, inline CSS가 변경되면 inline CSS만 갱신

 

 

case 1. key를 사용하지 않고, 마지막에 element를 추가하는 경우

 

👉🏻 첫 번째, 두 번째는 유지하고 <li>third</li> 만 추가

 

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

<ul>
  // 유지
  <li>first</li>
  // 유지
  <li>second</li>
  // 추가된 세 번째 element만 업데이트해서 렌더링
  <li>third</li> // 추가된 세 번째 element만 업데이트
</ul>

 

 

case 2. key를 사용하지 않고, 첫 번째에 element를 추가하는 경우

 

👉🏻 첫 번째 element부터 마지막 element까지 모두 새로 구축해야 해서 비효율적임

 

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

<ul>
  // 새로 업데이트해서 렌더링
  <li>Connecticut</li>
  // 새로 업데이트해서 렌더링
  <li>Duke</li>
  // 새로 업데이트해서 렌더링
  <li>Villanova</li>
</ul>

 

 

case 3. key 값을 부여하면서 첫 번째에 element를 추가하는 경우

 

👉🏻 key 속성을 이용하면 key를 통해 기존의 DOM 트리와

     업데이트된 DOM 트리의 자식 element들이 동일한지 확인해서

     key 값이 일치하지 않는 element만 추가해서 업데이트하기 때문에 렌더링에 효율적임

 

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

<ul>
   // 첫 번째에 추가되었지만 해당 element만 업데이트해서 렌더링함
  <li key="2014">Connecticut</li>
  // 기존의 key 값을 가지고 있는 element들은
  <li key="2015">Duke</li>
  // DOM에 새로 구축되지 않고 자리만 이동
  <li key="2016">Villanova</li>
</ul>