리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요.

1. Key

• <컴포넌트 key={고유값}>
• 리액트 컴포넌트에 고유성을 부여하는 컴포넌트 속성

2. Key 규칙

• key값은 조건부 렌더링 or 배열 렌더링처럼 함께 고려되는 형제 컴포넌트 간에 고유해야 함
• key값은 변경되지 않아야 함

3. 배열 렌더링

• 리액트 렌더링 참고
• 배열 리터럴이나 map() 메소드로 복수의 컴포넌트를 반환할 경우, 배열 렌더링 과정을 거침
• 배열 렌더링 중 비교 알고리즘을 적용할 때, 리액트는 기본적으로 나열 순서(인덱스)를 기준으로 전후 컴포넌트를 비교함
• 배열 내에서 순서가 바뀔 경우, 인덱스를 기준으로 비교하므로 순서 변경을 고려치 못해 비효율적인 렌더링이 이뤄짐

4. 배열 렌더링과 Key

• 배열 내 각 컴포넌트에 고유한 key가 할당될 경우, 배열 렌더링은 비교 알고리즘에 key를 활용함
• 배열 내에서 순서가 바뀌더라도, key를 기준으로 비교하므로 순서 변경을 고려해 효율적인 렌더링이 이뤄짐

5. 참고 자료

• React 공식문서(배열 & Key)
• React 공식문서(배열 렌더링 & Key)
• React 공식문서(재조정 & Key)
• React 렌더링