React에서의 Key의 역할
React Key 리액트는 state, props가 변경되었을 때 리랜더링한다. 리랜더링은 render()함수를 다시 호출하는 것이고 이 때 새로운 React element tree를 반환한다. 이때 이전 상태로부터 변경된 요소를 확인하기 위해서 원래라면 O(n^3)의 복잡도를 갖는 연산을 수행한다. 그러나 리액트는 O(n)의 휴리스틱 알고리즘을 통해서 트리를 비교 연산한다. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. 비교 알고리즘 두 개의 트리를 비교할 때 두 엘리먼트의 Root부터 비교한다. 이 Root엘리먼트의 타입이 다른 경우 아예 새로운 트리를 구축하기 시작..
프로그래밍/React
2021. 4. 20. 19:09
반응형
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
농담곰의 고군분투 개발기