pk 고유 id는 최상위 요소에 부여해야 해 (with. key 속성)

고유 pk id는 어디에 부여하는 게 좋은가?

본격적으로 디저트 레시피 프로젝트를 만들고 있는데, 가장 먼저 상세페이지 작업을 하고 있다.

상세페이지에서 레시피 고유의 pk id를 하나 키 설정해놓는 게 왠지 좋을 것 같아서 key를 어디에 부여하는 게 가장 좋은가?에 대한 의문이 있었다.

 

 

key를 사용하는 이유

일단 key를 부여하는 이유는 고유하게 식별할 수 있어 렌더링에 문제가 생기지 않기 때문이다.

리액트가 최상위 항목각 항목을 효율적으로 렌더링하기 위해 고유한 식별자를 필요로 하기 때문이다.

 

 

✅ 결론

key 속성은 가장 최상위 요소에 부여하는 것이 좋다.

key가 각 항목의 최상위 요소에 있어야 리액트가 그 요소를 하나의 독립된 엔티티로 인식하고, 이 요소가 변화할 때 올바르게 업데이트하거나 재배치할 수 있다.

 

 

예)  최상위 요소에 key를 두지 않으면 리액트는 컨테이너 구조를 효율적으로 추적하지 못해 불필요하게 많은 컴포넌트를 다시 렌더링할 수 있는데, 최상위 요소에 key를 두면 이러한 불필요한 렌더링을 피할 수 있다.