[React] Key 선택하기

Key 선택하기

리스트를 렌더링 할때 React는 렌더링하는 리스트 아이템에 대한 정보를 저장함. 리스트를 업데이트 할 때 React는 무엇이 변했는지 결정해야한다. 리스트의 아이템들은 추가,제거, 재배열, 업데이트 될 수 있다.

아래의 코드가

<li>Alexa: 7 tasks left</li>
<li>Ben: 5 tasks left</li>

이렇게 변한다면

<li>Ben: 9 tasks left</li>
<li>Claudia: 8 tasks left</li>
<li>Alexa: 5 tasks left</li>

사람의 눈에는 위치와 , 개수가 업데이트 되엇다고 생각하겠지만 React는 사람의 의도한 바를 알지못한다 그렇기 때문에 리스트 아이템에 key prop을 지정하여 각 아이템이 다른 아이템들과 다르다는 것을 알려줘야함 키를 지정하는 한가지 방법은 Alexa , Claudia , Ben 문자를 사용하는것 만약 데이터베이스 내에서 데이터를 불러와서 표시한다면 Alexa, Ben, Claudia의 데이터베이스 ID가 키로 사용될 수 있다.

<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>

키는 각 컴포넌트를 구별할 수 있도록 하여 React에게 다시 렌더링할 때 state를 유지할 수 있게 합니다. 만약 컴포넌트의 키가 변한다면 컴포넌트는 제거되고 새로운 state와 함께 다시 생성됩니다.

키가 지정되지 않은 경우 React는 경고 표시하며 배열의 인덱스를 기본키로 사용 배열의 인덱스를 키로 사용하는 것은 리스트 아이템 순서를 바꾸거나 아이템을 추가/제거 할때 문제가됨 명시적으로 key{i}를 전달하면 경고가 나타나기때문에 추천안함

키는 전역에서 고유할 필요는 없으며 컴포넌트와 관련 아이템 사이에서는 고유한 값을 가져야함