일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- JavaScript
- 향해99
- Mac OS NVM
- 회고록
- JS
- Redux
- Node
- 원티드프리온보딩
- 프로젝트
- next/link
- 광고지구
- Passed by Value
- git
- input error
- NextJs
- 인풋태그 엔터
- CPU와 GPU의 차이점
- 원티드인턴십
- 원티트 프리온보딩인턴십 1주차
- CloudFront 무효화
- NVM
- react
- 알고리즘
- react portal
- jsEvent Loop
- Til
- toast err
- 유령 의존성
- Client-Side Navigation
- 식별자란
- Today
- Total
SUIN
React element 랜더링 자세히 알아보기 본문
모든 것은 trade-off
리액트가 랜더링을 최적화하지만 알고리즘이 비효율적이거나 최적화되지 않았다면 오히려 더 안 좋을 수 있다.
https://ko.reactjs.org/docs/rendering-elements.html
React element는 불변 객체(immutable)이다
불변 객체란?
- 변하지 않는 객체
- 우리는 그저 React.DOM.render로 전달할 뿐 변경 판단 및 반영은 리액트가 한다.
- 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다
https://ko.reactjs.org/docs/reconciliation.html
비교 알고리즘 (Diffing Algorithm)
두 개의 트리를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교합니다. 이후의 동작은 루트 엘리먼트의 타입에 따라 달라집니다.
- 두 개의 트리란 바뀌기 전 후 두 가지를 뜻하며 이두가지를 비교할 때는 root부터 비교한다
엘리먼트의 타입이 다른 경우
두 루트 엘리먼트의 타입이 다르면, React는 이전 트리를 버리고 완전히 새로운 트리를 구축합니다. <a>에서 <img>로, <Article>에서 <Comment>로, 혹은 <Button>에서 <div>로 바뀌는 것 모두 트리 전체를 재구축하는 경우입니다.
DOM 엘리먼트의 타입이 같은 경우
같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 동일한 내역은 유지하고 변경된 속성들만 갱신합니다.
- 타입이 같을 경우 이전 것들은 지우고 새로 그리지만 타입이 동일할 경우 속성들만 갱신된다. 즉 타입이 동일하다면 key를 먼저 비교한 후 props를 비교하여 값이 동일할 경우 유지 다를 경우 변경
children = props
<button>{number}</button>
<button children={number}></button>
리액트는 DOM을 어떻게 비교하는가 ?
- 가상돔(VirtualDOM)을 가지고 이전 가상 돔과 새로 들어온 가상 돔을 비교해서 재조정 알고리즘을 통해 업데이트한다
- DOM을 계속 접근해서바꾸는것이 아니라 가상 돔(VirtualDOM)에 한 번 더 비교 후 반영하여 그려준다.
'React' 카테고리의 다른 글
[Raact] JSX 란 (0) | 2022.02.07 |
---|---|
[React] React DOM 다루기 (JSX 없이 element 그려보기) (0) | 2022.02.07 |
[React] Vanilla JS 와 React의 랜더링, 리액트 리랜더링 장점 알아보기 (0) | 2022.02.04 |
[React] React Hook (0) | 2021.11.28 |
[React] 컴포넌트 생명주기 / 클래스 , 함수 LifeCycle (0) | 2021.11.28 |