React 컴포넌트의 key 속성에 대해 설명해 주세요.

👩🏻‍💻 React 컴포넌트의 key 속성에 대해 설명해 주세요.

React에서 리스트 형태로 컴포넌트를 렌더링 할 때, key 값을 넣어달라는 console 에러가 자주 뜨는데요. 이때 이 key 값이 어떠한 역할을 할까요?

 

💁🏻‍♀️ 요약하자면 ,

key는 React가 어떤 항목을 변경하거나 추가할지 또는 삭제할지 구별하도록 돕는 역할을 합니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

 

key 속성은

같은 컴포넌트를 여러 번 렌더링할 때, 다른 컴포넌트임을 구분하기 위해 사용하는 속성인데요. 예를 들어, 10개의 트윗 중 하나의 트윗만 변경되었을 때 해당 트윗만 재렌더링하고, 다른 9개의 트윗은 그대로 둘 수 있습니다. 이렇게 key 속성을 활용하면 React가 직접 DOM을 제어하는 것보다 더 빠르고 효율적으로 렌더링 할 수 있습니다.

 

그 외,

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

 

 

📎 내용 참조

- React 공식문서: Key

- React에서 key의 역할, 컴포넌트를 다시그리는 과정(reconciliation)