key는 어떻게 사용되나요?

key가 무엇인가요?

React에서 key는 컴포넌트 리스트를 렌더링할 때 각 항목을 식별하기 위한 고유한 문자열을 의미합니다. key의 주요 목적은 React가 렌더링 된 항목을 식별하고 추적하도록 돕는 것입니다.

key를 사용하는 이유

리스트나 배열의 각 항목을 반복적으로 렌더링 할 때, React는 DOM 업데이트를 효율적으로 수행하기 위해 각 항목에 대한 정보를 저장하고 추적합니다. 만약 리스트의 항목 순서가 바뀌거나 새 항목이 추가되면, React는 이 변경을 파악하고 필요한 최소한의 DOM 업데이트만 수행합니다. 이러한 과정에서 key는 각 항목이 고유하게 식별될 수 있도록 도와주는 중요한 역할을 합니다.

key 사용의 예

예를 들어, 배열의 각 항목을 렌더링하는 React 컴포넌트가 있다고 가정해봅시다:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

위 코드에서는 key를 지정하지 않았기 때문에 React는 각 항목을 고유하게 식별하는 데 어려움을 겪을 수 있습니다. 따라서 위 코드는 아래와 같이 수정되어야 합니다:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

이제 각 <li> 항목에는 고유한 key 속성이 있습니다. 이로써 React는 이 항목들을 추적하고 필요에 따라 효율적으로 업데이트할 수 있습니다.

key={number.toString()}으로 쓴 이유

key는 고유하며 안정적인 문자열을 사용해야 합니다.(그러나 toString()이 꼭 필요한 것은 아닙니다. JavaScript는 숫자를 문자열로 자동으로 캐스팅할 수 있습니다.) 일반적으로 데이터의 ID를 key로 사용합니다. 데이터에 고유한 ID가 없는 경우에는 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있지만, 이는 항목의 순서 변경, 항목 추가 및 제거가 빈번하게 발생하는 경우에는 비효율적일 수 있으므로 가급적 피해야 합니다.