[React] 리스트와 key

리액트에서 key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다.

 

🔑 key

 

key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. 

 

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다. 

 

렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 리스트 항목에 명시적으로 key를 지정하지 않으면 리액트는 기본적으로 인덱스를 key로 사용합니다. 

( map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋습니다. )

 

 

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

 

key는 배열 안에서 형제 사이에서 고유해야 하고, 전체 범위에서 고유할 필요는 없습니다.

그렇기때문에 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

 

리액트에서 key는 힌트를 제공하지만 컴포넌트로 전달하지는 않습니다.

컴포넌트에서 key와 동일한 값이 필요하다면 다른 이름의 prop으로 명시적으로 전달해야합니다.

( props.key는 읽을 수 없습니다. )