React에서 key가 하는 역할에 대해 설명해주세요
Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.
React에서 key는 어떤 원소에 변동이 있었는지 알아내기 위해 사용한다.
어떤 항목을 변경, 추가, 삭제할지 구별하도록 돕는 역할을 한다. key를 통해 엘리먼트에 안정적인 고유성을 부여할 수 있다.
Warning: Each child in a list should have a unique “key” prop.
key를 사용하지 않으면 React가 바뀌어야 할 순서를 알 수 없게 된다.
key를 사용하지 않는 경우 React는 인덱스를 사용한다. 이는 항목이 추가, 삭제될 때 배열의 순서가 바뀌면 렌더링 순서가 변경되어 버그가 발생할 수 있다.
마찬가지로 key={Math.random()}와 같이 즉석에서 키를 생성하지 말아야 한다.
이렇게 하면 렌더링 간에 key가 일치하지 않아 모든 컴포넌트와 DOM이 매번 다시 생성된다.
이는 속도가 느려질 뿐만 아니라 목록 항목 내부의 사용자 입력도 손실된다.
key의 규칙
- 키는 형제간에 고유해야 한다. 하지만 서로 다른 배열의 JSX 노드에는 동일한 키를 사용해도 괜찮다.
- 키가 변경되면 목적에 맞지 않는다. 렌더링 중에는 생성하지 않아야 한다.
GPT로 문장 정리하기
React에서 key가 하는 역할에 대해 설명해줘
- key는 각각의 리스트 아이템을 구별하는 역할
- React가 어떤 요소가 변경, 추가, 삭제되었는지 식별하는데 도움
- key는 다음과 같이 사용된다.
- 배열 내부의 엘리먼트를 고유하게 식별
- 배열 내부의 엘리먼트 순서를 유지
- 배열 내부의 엘리먼트 상태를 추적
키워드 정리
- 재조정(reconciliation)