Virtual DOM, state, props

Virtual DOM 이란?

위키에서의 정의

A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm.[1] Updating the virtual DOM is comparatively faster than updating the actual DOM (via JavaScript).[citation needed] Thus, the framework is free to make necessary changes to the virtual DOM relatively cheaply. The framework then finds the differences between the previous virtual DOM and the current one, and only makes the necessary changes to the actual DOM.

 

Virtual  DOM은 이전 가상 DOM과 현재 가상 DOM 간의 차이점을 찾아 실제 DOM에 필요한 변경만 수행하여 효율적인 업데이트를 가능하게 한다. Virtual DOM은 UI의 가상적인 표현을 메모리에 저장하고, ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그램이다. 이를 재조정이라고 부른다.

React에서는 Virtual DOM을 사용하여 JSX와 함께 React.createElement()을 호출하여 React element를 생성한다. 이 element는 가볍고 상태를 가지지 않으며 불변성을 유지한다. Virtual DOM이 업데이트되면 이전 Virtual DOM과 비교하여 변경된 부분만 실제 DOM에 업데이트된다. 이 과정은 Diffing 알고리즘을 통해 이루어진다.

동작방식

1. DOM tree 생성: 브라우저가 HTML 코드를 읽고 해석하여 DOM 트리를 생성한다.
2. Render tree 생성: CSS 파일과 inline 스타일을 파싱하여 렌더링 트리를 생성한다.
3. Layout (Reflow): 각 노드들의 스크린에서의 좌표에 따라 위치를 결정한다.
4. Paint (Repaint): 실제 화면에 그린다.

props

props는 porperties의 약자이며  리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다. props는 읽기 전용이며 변경되지 않으며, 부모 컴포넌트에서 자식 컴포넌트로 단방향으로만 흐른다. props를 통해 전달되는 데이터는 자식 컴포넌트에서 변경되지 않으며, 변경이 필요한 경우에는 부모 컴포넌트에서 변경해야 한다. props는 컴포넌트의 속성값으로 전달되며, 컴포넌트 내에서는 this.props를 통해 접근할 수 있다.

state

state는 컴포넌트의 상태를 저장하고 필요에 따라 변경할 수 있다. useState훅을 사용해 선언 할 수 있고, 상태를 변경할 대는 setState함수를 호출한다. 이후 컴포넌트를 다시렌더링한다.
state는 불변성을 유지한다..이전 state 객체를 변경하지 않고, 새로운 state 객체를 생성하여 업데이트한다.