리액트에서 key를 언제 쓰는 건가요?

Question

반복문으로 요소 생설할 때 그 요소 태그 안에 쓰면 된다고 이해하면 되나요?

dangerousman · Answer

Key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 일치시킬 수 있도록 합니다. 이는 배열 항목이 정렬 등으로 인해 이동하거나 삽입되거나 삭제될 수 있는 경우 중요해집니다. key를 잘 선택하면 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리에 올바르게 업데이트 하는데 도움이 됩니다.리스트 렌더링 – React

나니야 · Answer

key는 경고 메시지때문이라도 항상 쓰는게 좋고성능에 큰 영향이 있습니다. 어찌보면 이 질문에 답할 수 있는거에 따라서 react 실력을 가늠할수도요

개이득인개발 · Answer

리액트 가상돔은 key를 통해 리렌더 여부를 확인합니다.배열을 순회하면서 그린 컴포넌트에 key를 적용하지 않으면 자동으로 배열 인덱스가 key로 설정됩니다.이 때 발생하는 문제는 배열 컴포넌트중 일부나 배열 컴포넌트를 그린 부모 컴포넌트에서 리렌더가 일어날 경우배열 컴포넌트가 다시 가상돔에 그려짐을 의미합니다.(key가 언제든지 바뀔 수 있기 때문)이것은 눈에는 보이진 않지만 굉장히 성능적으로 좋지못하고 리액트 메커니즘에도 맞지 않습니다.고유한 key를 적용함으로써 리액트는 리렌더가 일어날때 특정 컴포넌트를 새로 다시 그릴지 아니면 재사용할지를 판단하는데 사용할 수 있습니다.그리고 key는 배열요소뿐만 아니라 특정 하위 컴포넌의 key를 컨트롤 함으로써 완전한 state초기화를 진행할 수 있습니다.물론 반대로 key를 동일하게 한 후 돔 트리 레벨이 같다면 컴포넌트끼리 포지션을 바꾸어도 state가 유지되게 하는방법이 있습니다.

리액트에서 key를 언제 쓰는 건가요?

3개의 답변

기술 목록