Today rtolzo Learned
Github
Tags
Github
Tags
  • Topics
    • Typescript
    • Git
  • TIL
    • 2022 TIL
    • 2023 TIL
    • 2024 TIL

React에서 key는 내부적으로 어떻게 처리될까?

React는 내부적으로 key를 통해 컴포넌트 인스턴스를 해시맵 형태로 저장한다. 이 후 리렌더링 과정에서 React는 이전 렌더링의 key-인스턴스 맵을 참조하고 동일한 key를 가진 새 엘리먼트가 발견되면, React는 해당 인스턴스를 재사용한다.

react/react-reconciler/ReactChildFiber.js - updateSlot

해당 코드에서 이전 key가 존재하면 updateElement를 호출하여 재사용해주고, 존재하지 않으면 null을 반환해서 Fiber를 새로 생성하는 과정을 거친다.

마지막 수정일: