배열 렌더링 시 key를 사용해야 하는 이유

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

key가 없을 때 발생하는 문제점

만약 key를 사용하지 않고 배열을 렌더링하면, 리액트는 각 항목을 인덱스 기준으로 식별하며 다음과 같은 문제점이 발생할 수 있습니다.

1. 비효율적인 업데이트: 배열의 중간에 항목이 추가되거나 삭제되면, 리액트는 변경된 항목뿐만 아니라 그 이후의 모든 항목을 다시 렌더링해야 합니다. 이는 성능 저하를 유발할 수 있습니다.
2. 예측 불가능한 동작: 만약 배열의 항목이 컴포넌트의 상태를 가지고 있다면, key가 없을 경우 예기치 않은 오류가 발생할 수 있습니다. 예를 들어, 삭제된 항목의 상태가 남아있는 다른 항목에 영향을 줄 수 있습니다.

key의 역할

key는 리액트에게 각 항목의 고유한 식별자를 제공합니다. 이를 통해 리액트는 다음과 같은 작업을 효율적으로 수행할 수 있습니다.

1. 항목 식별: key를 사용하여 각 항목을 고유하게 식별하고, 변경된 항목만 다시 렌더링합니다.
2. 최적화: key를 통해 리액트는 최소한의 변경만 DOM에 적용하여 렌더링 성능을 최적화합니다.
3. 상태 유지: key를 사용하여 컴포넌트의 상태를 유지하고, 예기치 않은 오류를 방지합니다.

key 사용 시 주의사항

• key는 각 항목마다 고유한 값이어야 합니다.
• key는 예측 가능하고 안정적으로 유지되어야 합니다.
• key는 배열의 항목이 변경되어도 동일한 값을 유지해야 합니다.

권장하는 key 사용 방법

• 데이터베이스의 고유 ID를 key로 사용하는 것이 가장 좋습니다.
• 만약 고유 ID가 없다면, UUID와 같은 고유한 문자열을 생성하여 key로 사용할 수 있습니다.
• index를 key로 사용하는 것은 권장하지 않습니다.

결론

리액트에서 배열을 렌더링할 때 key를 사용하는 것은 필수적입니다. key를 통해 리액트는 효율적인 업데이트와 예측 가능한 동작을 보장할 수 있습니다. key 사용 시 주의사항을 숙지하고, 적절한 key를 선택하여 사용하는 것이 중요합니다.

추가 정보

• 리액트 공식 문서: 유일한 Key
• 관련 블로그 글: 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유