Virtual Dom 을 다루기 전에 먼저 Dom 을 알아보겠다.
DOM 이란
Document Object Model(문서객체모델)의 약자다.
- 문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록 <html 태그> 들을 객체 (object) 로 만든 것이다.
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다.
근데 이돔의 문제점은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 한다. 새롭게 구성하기 때문에 렌더할 양이 많으면 속도가 느려지게 된다.
그래서 나온게 Virtual DOM(가상돔) 이다.
(특징)
- DOM 의 구조를 흉내낸 JavaScript 객체이다.(트리구조로)
- In-memory 에 존재해서 실제 렌더 되지 않는다.
절차-
1. 뭐가 바뀌면 UI 를 가상돔에 리렌더링 한다.
2. 가상돔끼리 비교하고
3. 바뀐부분만 실제 DOM 에 적용한다.
- state 과 props
Props 는(“properties”의 줄임말) 와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
| State | Props | |
| 유스케이스 | 뷰에 렌더링돼야 하는 컴포넌트의 데이터를 저장하는 데 사용한다 |
데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는 데 사용한다 |
| 가변성 | 상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있다 |
props는 바뀔 수 없다. 한 번 설정되면 props를 변경할 수 없다 |
| 업데이트 | 이벤트 핸들러는 일반적으로 state를 업데이트한다 | 상위 컴포넌트는 하위 컴포넌트에 대한 props를 설정한다 |
📌 State 사용하기 : useState
함수형(function) 컴포넌트에서 { useState } Hooks를 활용해 state를 사용해보겠습니다.
useState란 리액트의 기본 Hook 중 하나로, 컴포넌트에서 state를 추가할 때 사용합니다.
※ 기본훅 : useState, useEffect, useContext
- 반드시 setState 로 데이터를 변경하기
state 값을 변경할 때는 반드시 setState를 사용하여 변경해야 합니다.
setState를 사용한 경우, state값이 변경되면 useState가 변경을 감지하고, 자식 컴포넌트들까지 리렌더링이 발생합니다.
직접 state를 수정하게 되면 리액트가 render 함수를 호출하지 않아 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다.
-useState 형태
const [ state, setState ] = useState(initialState)
const [ 상태, 세터함수 ] = useState(초기값)