Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- CloudFront 무효화
- Node
- Til
- NVM
- 알고리즘
- CPU와 GPU의 차이점
- 원티드인턴십
- 식별자란
- next/link
- Redux
- 인풋태그 엔터
- react portal
- 광고지구
- NextJs
- Passed by Value
- react
- Mac OS NVM
- 원티드프리온보딩
- jsEvent Loop
- 유령 의존성
- git
- 회고록
- JavaScript
- 원티트 프리온보딩인턴십 1주차
- 프로젝트
- input error
- JS
- Client-Side Navigation
- 향해99
- toast err
Archives
- Today
- Total
SUIN
[React] Vanilla JS 와 React의 랜더링, 리액트 리랜더링 장점 알아보기 본문
728x90
- Vanilla js - 변경으로 인해서 element를 계속 다시 그린다
- React - 변경된 부분만 다시 그린다.
예를 들어보자
Vanilla js 랜덤 숫자 돌려보기
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
function random() {
const number = Math.floor(Math.random() * (10 - 1) + 1);
const element = `
<button>${number}</button>
<div>
<p>${number}</p>
</div>
`;
rootElement.innerHTML = element;
}
setInterval(random, 1000);
</script>
React 랜덤 숫자 돌려보기
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
function random() {
const number = Math.floor(Math.random() * (10 - 1) + 1);
const element = (
<>
<button>{number}</button>
<div>
<p>{number}</p>
</div>
</>
);
ReactDOM.render(element, rootElement);
}
setInterval(random, 1000);
</script>
Vanilla.js 랜더링
- 버튼 element가 새로그려지기 때문에 포커스를 잃게 된다.
React 랜더링
- element가 새로 만들어지는 것이 아니라 글자만 계속 변경되고 있다
React 리 랜더링의 장점을 무엇인가
- 여러 개의 element들이 있을 때는 변경점이 있을 때마다 element가 사라졌다가 바뀌게 된다면 다른 element의 배치에 영향을 주게 된다
프런트의 최적화를 위해 Reflow, RePaint에 있어서 React는 이점을 가질 수 있을 것이다 (부모에게서 전파가 되지 않는다!)
'React' 카테고리의 다른 글
[Raact] JSX 란 (0) | 2022.02.07 |
---|---|
[React] React DOM 다루기 (JSX 없이 element 그려보기) (0) | 2022.02.07 |
React element 랜더링 자세히 알아보기 (0) | 2022.02.07 |
[React] React Hook (0) | 2021.11.28 |
[React] 컴포넌트 생명주기 / 클래스 , 함수 LifeCycle (0) | 2021.11.28 |