[React] Key

 

결, 꼬재랑 함께하는 레벨2 방학 스터디

 

Key

React에서 key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 값입니다. 따라서 key는 각 원소에 안정적인 고유성을 부여한다. key는 element를 만들 때 포함해야 하는 특수한 문자열 attribute이다.

다음과 같이 코드를 작성하면 React는 에러를 노출 시킨다.

element에 고유한 key 속성 값을 넣으라는 에러 메시지가 나타나는데, 이때 index 값을 key 속성값으로 대입하면 에러 메시지는 나타나지 않으나 다음과 같은 문제가 발생한다.

 

key값을 배열의 index로 하면 발생하는 문제!

React 렌더링에서 재조정 시, 컴포넌트는 key를 보고 해당 element를 비교를 하는데 배열이 재배열 된다면, 컴포넌트의 state가 엉망이 되어 순서가 이상하게 배치 되거나 의도하지 않은 state의 값을 가지게 된다.

따라서 index가 아닌 state의 고유한 id값으로 key값을 설정해야 한다.

const numbers = [
	{ id: "unique0", num: 0 },
	{ id: "unique1", num: 1 },
	{ id: "unique2", num: 2 },
	{ id: "unique3", num: 3 },
	{ id: "unique4", num: 4 },
]

 

데이터에 고유한 id 값이 없다면 어떻게 key 값을 설정하는 게 좋을까요?

데이터에 고유한 id값이 없다면 nanoid, uuid와 같은 id 부여 모듈을 사용해보는 것을 추천한다.

 

Key는 형제 사이에서만 고유한 값이어야 한다.

Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

 

---

nanoid

nanoid

uuid

uuid

리스트와 Key - React

리스트와 Key – React

재조정 (Reconciliation) - React

재조정 (Reconciliation) – React

React 톺아보기 - 05. Reconciler_1 | Deep Dive Magic Code

React 톺아보기 - 05. Reconciler_1 | Deep Dive Magic Code