[React] Key의 올바른 사용법

 

 

 

 

 

 

 

 

 

리액트에서 static 하지 않고 동적으로 변할 수 있는 데이터의 리스트를 반복해서 렌더링 할 경우, map()이 자주 사용된다. 이 때 index 값을 key로 줄 경우 문제점이 발생할 수 있다.

또한, key값을 주지 않을 경우에는 변경이 필요하지 않은 리스트의 요소까지 리렌더링이 일어나게 되므로 비효율적이다.

 

 

 

✅ Key의 올바른 사용법

• key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
• 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용되기 때문에, 유니크한 값을 key에 할당해야 한다.
• 엘리먼트에 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
• 아이템이 고정되어 변경이 일어나지 않을 경우에는 배열의 index를 key로 사용할 수 있지만, 재배열 되는 경우 비효율적으로 동작하기 때문에 지양한다. (컴포넌트의 state와 관련된 문제가 발생할 수 있다.)
• 형제 사이에서만 유일하면 되며, 전역에서 유일할 필요는 없다.