react key prop

글 작성 동기?

react key prop의 필요성에 대해서 정리하고 싶어서 글을 작성하였습니다.

 

 

key props 왜 필요한가?

key props를 사용하지 않는다면

 

<ul>
	<li>1</li>	
	<li>2</li>
</ul>

해당 코드가

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

로 업데이트 될 때, react 내부에서는

<li>1<li>와 <li>1<li>가 일치하는지 확인하고

<li>2<li>와 <li>2<li>가 일치하는지 확인하고

마침내 <li>3<li>는 한곳에만 있음을 발견하고 추가해 줍니다.

 

그런데 만약

<ul>
	<li>1</li>	
	<li>2</li>
</ul>

<ul>
	<li>3</li>
	<li>1</li>	
	<li>2</li>
</ul>

이러한 변경이 일어 났을 때, react는 <li>3</li>를 단순히 추가하지않고,

<li>1</li>를 <li>3</li>로 변경하고

<li>2</li>를 <li>1</li>로 변경하는 비효울적인 연산을 하게 됩니다.

 

이러한 비효율을 방지하기 위해서 ... key props를 쓰게 됩니다.

 

key를 사용하면 key를 통해 트리를 비교하기 때문에 <li>3</li>가 새로운 노드란 것을 알 수 있게 됩니다.

=> 사실 key를 입력하지 않으면 자동으로 index를 넣어서 관리한다고 합니다.

key prop 추가하는법

{props.items.map((ex) => (
<ExItem
	key={ex.id}
	title={ex.title}
/>
))}

 

key prop 사용시 버그 관점

key prop에 index를 사용하시는 분들이 있습니다. 이것이 안티패턴이라고 합니다.

평상시처럼 이용할 때는 문제 없지만, 정렬할때 문제가 발생하게 됩니다.

예를들면

A - 0

C - 1

B - 2

라는 리스트에서 C라는 아이템을 선택하고 정렬했을 때,

A - 0

B - 1

C - 2

라는 리스트가 나오지만

우리가 선택했던 C라는 아이템이 선택되어 있지 않고, B가 선택되어 있게 됩니다.

그 이유는 react가 key를 기준으로 DOM element를 구별하기 때문입니다.

 

key prop 사용시 성능적 관점

일반적으로 리렌더링을 할 때,

react는 before 스냅샷과 after 스냅샷을 만들어 냅니다.

해당 스냅샷들을 key를 통해 비교하게 되는데,

before에만 있고, after는 없는 키다 => 삭제되는 컴포넌트

before에는 없고, after에 있다 => 새로 등록되는 컴포넌트

before에도 있고, after에도 있다 => 업데이트되는 컴포넌트

key index를 사용했을 때,

C - 0

B - 1

A - 2

해당 데이터를 정렬했을 때

A - 0

B - 1

C - 2

가 되기 떄문에 모두 업데이트하여 리렌더링되게 됩니다.

 

그러나 고유 ID 를 사용한다면

C - 고유1

B - 고유2

A - 고유3

해당 데이터를 정렬했을 때

A - 고유3

B - 고유2

C - 고유1

위의 예시와 차이점은 MEMO기능을 썼을 때 입니다.

위의 예시는 key = 0의 값이 C에서 A로 변했다고 생각하여 memo를 사용하여도 리렌더링 하지만,

밑의 예시는 key = 고유1 값이 그대로 C에서 C이기 때문에 리렌더링이 일어나지 않습니다.

 

key로 index를 써도 좋은 경우

모든 데이터가 변경될 때 입니다.

A - 0

B - 1

C - 2

데이터가

D - 0

E - 1

F - 2

로 변경될 때 key로 index를 쓰는경우에는, react가 값이 변경되었다고 판단하여 리렌더링 할 뿐이지만,

 

id를 사용할 때는

A - 고유1

B - 고유2

C - 고유3

데이터가

D - 고유4

E - 고유5

F - 고유6

되기 때문에 react는 모두 제거되고 새로 생겼다고 판단하기 때문에 컴포넌트를 삭제하고 생성하는 과정을 거쳐서 오히려 더 느리게 됩니다.

 

 

 

참고 :

https://ko.reactjs.org/docs/reconciliation.html#recursing-on-children

재조정 (Reconciliation) – React

https://reactjs.org/docs/lists-and-keys.html

Lists and Keys – React

https://blog.loginradius.com/engineering/reacts-reconciliation-algorithm/

React's Reconciliation Algorithm | LoginRadius Blog

https://www.developerway.com/posts/react-key-attribute

React key attribute: best practices for performant lists