Virtual DOM
웹에서 DOM이란 Document Object Model의 약자로 HTML문서에 대한 인터페이스를 뜻합니다.
<!-- HTML --> <html> <head> <title> </title> </head> <body> <h1>Hello, World!</h1> </body> </html>
위 코드에서 html, head, body 등이 모여 트리 형식을 이루고 각 요소의 스타일을 입히고 레이아웃 과정(스크린에서 위치가 주어짐)을 가져 DOM이 생성됩니다.
DOM을 구성하는 요소에 변화가 생긴다면 위 과정을 다시 반복합니다.
UI를 만들기위한 JS 라이브러리인 React에서는 사용자의 상호작용이 많이 일어나게되고 SPA 구조를 가져 한 페이지에서 많은 변화가 일어납니다.
그렇게되면 위 과정이 많이 반복되어 성능이 떨어지겠죠?
이를 위해 React는 virtual DOM을 사용합니다.
virtual DOM이란 DOM의 복사본과 같은 개념으로 DOM을 복사하여 가상돔을 만들고 가상돔에서 요소를 변화시켜 DOM에 적용합니다.
한번에 10가지의 요소가 변화된다면 어떻게될까요?
virtual DOM을 사용하지 않는다면 위에서 말한 과정이 10번 반복될 것입니다.
virtual DOM을 사용한다면?
- DOM을 복사하여 요소들을 JS 객체화 시킵니다.
- virtual DOM에서 10가지 요소를 변화시킵니다.
- 변화된 virtual DOM을 DOM에 적용시켜 위에서 말한 과정이 진행됩니다.
스타일을 적용시키고 레이아웃과정을 겪는 등의 과정이 줄어 브라우저 내에서 발생되는 연산을 대폭 줄일 수 있게 되는 것입니다.
Elements
elements란 위의 DOM에서 html, head, body와 같은 요소를 뜻합니다.
React에서 elements는 virtual DOM의 요소가 되며 다음과 같은 형식으로 작성하여 JS로 객체화하여 관리합니다.
// JS React.createElement( type, // 태그 이름 문자열 | 리엑트 컴포넌트 [props], // 속성 [...children] // 자식요소 );
다음은 예시입니다.
<!--HTML--> <h1 class="hi">안녕하세요</h1>↓
// JS React.createElement( "h1", {className : "hi"}, "안녕하세요" );
Components와 Props
components는 props값을 매개변수로 받아 elements를 반환하는 역할을 합니다.
Component 파일
// JSX import React from "react"; const styles = { messageText: { color: "blue", fontSize: 16, } }; function Watch(props) { return( <div> <h1>안녕하세요!</h1> { (props.userName.length) && <h2 style={styles.messageText}> {props.userName}님, 환영합니다. </h2> } </div> ); } export default Watch;
Component를 사용하는 JS파일(index.html과 연결)
// JS import Watch from './~~/Watch'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Watch userName="KSJ"/> );
이렇게 component를 통해 element를 캡슐화하여 생성함으로써 다음과 같은 장점을 갖게됩니다.
- 가독성 향상
- 재사용성 향상
- 정보은닉
component에서 중요한 2가지는 props와 state입니다.
props는 component에 전달되는 객체이며
state는 component 안에서 관리하는 객체입니다.
이해를 돕기 위해 JS의 function과 비교하면 다음과 같습니다.
- Component : function
- Element : return값
- props : 매개변수
- state : function 내부의 지역변수
component는 클래스형과 함수형으로 나뉩니다.
state와 lifecycle은 클래스형 component에서 사용하던 개념입니다.
React 16.8버전부터 Hook이라는 요소가 추가되어 함수형 component도 state와 lifecycle의 사용이 가능하게 되었습니다.
>> Component 더 알아보기 (클래스형)
>> Component 더 알아보기 (함수형)
State
state는 component에서 변수 역할을 합니다.
JS의 일반적인 변수와 state는 어떤 차이가 있을까요?
-
state로 선언된 데이터의 값이 변경되면 HTML이 재 렌더링 됩니다.
React의 특성상 입력에 따라 화면의 업데이트가 올바르게 이루어져야 합니다.
변수의 값이 바뀌면 다시 렌더링이 이루어져야 하는데 이를 자동으로 해주는 역할을 하는게 state 입니다.
즉, 값이 변경될 때 화면의 재 렌더링이 필요한 값만 state에 포함시켜야 합니다. -
state는 값을 저장할 수 있습니다.
: 함수가 종료될 때 함수 안의 변수의 값은 사라집니다. state는 함수가 종료된 후에도 사용이 가능합니다.
Lifecycle
component가 생성(마운트)되고 업데이트되고 사라지는 과정을 lifecycle이라고 합니다.
component의 데이터를 언제 가져올지 state의 값이 변동될 때 어떤 작업을 할지 등을 lifecycle에서 관리합니다.
