[React] key prop의 중요성

1. Error 문구 : 목록에 있는 각 자녀가 고유의 키 prop을 가져야 한다는 문구

Warning: Each child in al list should have a unique key prop.

Check the render method of  ''. See for more information.

위의 에러가 나는 예시 코드

return<>

	{LIST.map((item) => (<CustomComponent {...item}>))}

</>

 

2. 해결 방법 

내장 요소너 커스텀 컴포넌트에  고유한 key prop추가 *고유한 값이어야함!!

return<>

	{LIST.map((item) => (<CustomComponent key={item.id} {...item}>))}

</>

 

2. key가 필요한 이유 

1). 리액트가 아이템을 구별하기 위해 사용하기 위해서 : 리액트 시스템 내부에서 이 목록을 효율적으로 렌더링하고 업데이트하기 위해 사용.

즉, 동적인 목록형태에서같은 타입의 형제 컴포넌트가 있을 때, 컴포넌트의 수나 위치가 변경되는 경우 사용됨. > 리액트는 key를 부여할 시에 컴포넌트를 확실히 식별해낼 수 있음. 리액트는 상태를 위치로 식별하는데 key를 부여함으로써  상태관리에 도움을 줌.

 

2) key가 없을 시에는 수정되거나 추가되는 컴포넌트만 렌더링 되는게 아니라, 모든 목록이 재 렌더링됨 > 리액트가 컴포넌트를 확실히 식별하지 못했기 때문. 하지만 key를 추가하면 추가/수정된 컴포넌트만 랜더링 되게 됨(리액트가 다른 요소들이 이 전 DOM의 한 부분이라는것을 인식했기 떄문) > 이전 요소들을 재사용할 수 있고 재생성 하지 않아도 됨

 

3) key를 이용해 컴포넌트를 초기화 시킬 수 있음 부모 컴포넌트에서 관리하는 상태값을 자식 컴포넌트의 key로 부여함으로써, 상태값이 변경되면 이전 컴포넌트 인스턴스는 삭제하고 재생성함