Comments (1)
Reconciliation
React는 2가지를 이용해서 DOM 트리 탐색 알고리즘의 복잡도를 O(n)으로 줄임
- 부모 노드 타입이 다르면 자식 노드는 비교하지 않는다.
- 노드에 key를 부여하면 일일이 탐색하지 않고 접근 가능하다.
1. 부모 노드 타입이 다르면 자식 노드는 비교하지 않는다.
- React는 DOM 트리를 level-by-level로 탐색
- 부모 노드 타입이 바뀌는 순간 그 아래 모든 자식 노드들은 굳이 탐색할 필요 없이 언마운트되고 그 state도 사라지며 재렌더링됨
- Component나 노드 타입이 바뀌지 않는다면 최대한 렌더링하지 않는 방향으로 최소한의 변경 사항만 업데이트
- Virtual DOM : 실제 DOM을 생성할 때 필요한 정보들을 담은 객체
- 업데이트 할 내용이 생기면 Virtual DOM 내부의 프로퍼티만 수정 후 모든 노드에 걸친 업데이트가 끝나면 실제 DOM으로 렌더링 시도
2. 노드에 key를 부여하면 일일이 탐색하지 않고 접근 가능하다.
- React는 자식 노드들을 비교할 때 이전 목록과 다음 목록의 순서에 따라 업데이트 여부 결정
// 마지막 <li>third</li> 만 추가되면 됨
<ul>
<li>first</li>
<li>second</li>
</ul>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
// 리스트 맨 앞에 노드가 추가되어 전체적인 순서가 달라져서 모든 자식 노드들을 변경해야함 -> 리소스 낭비
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
- 그래서 반복되는 노드에
key
를 부여 - 그러면 노드 순서가 바뀌어도 기존 노드들은 그대로 두고 바뀐 노드만 렌더링 가능, 서브 트리 내에서만 unique하면 되고 전역에서 unique할 필요 X
- 배열의 index를 key로 사용하는 것은 지양 -> 항목의 순서가 바뀔 경우, key도 바뀌고 그 결과로 component의 state가 의도대로 동작하지 않을 수 있음
from today_i_learned.
Related Issues (20)
- [React-Basic-Hooks] 6. React event handling HOT 1
- [React-Basic-Hooks] 7. React Hooks
- [React-Basic-Hooks] 8. Handle DOM in React (ref)
- [React-Basic-Hooks] 9. Portal
- visibility + opacity에 transition
- [React-Basic-Hooks] 10. Context
- NPM
- Node.js path 모듈
- NetworkInformation API
- Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
- [CodingApple Vue] 부동산 사이트 개발
- [BABEL] Note: The code generator has deoptimised the styling of as it exceeds the max of "500KB".
- [ReactJS로 영화 웹 서비스 만들기] Chapter #1 ~ #6 HOT 2
- [ReactJS로 영화 웹 서비스 만들기] Chapter #7
- HTTP cookie 🍪🍪🍪
- [React JS 마스터클래스] Chapter #2 Styled Components
- [React JS 마스터클래스] Chapter #3 Typescript
- [Typescript] Property 'value' does not exist on type 'EventTarget'.
- [React JS 마스터클래스] Chapter #4 CRYPTO TRACKER HOT 1
- [React JS 마스터클래스] Chapter #5 State Management
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from today_i_learned.