[React] 리액트와 가상돔(virtualDOM) / 터미널 초기 설정

 

 
목차
1. 리액트(React)
2. 리액트 사용이유와 VitrualDOM(가상돔)
3. terminal에서  초기 설정하기
 

---

 
 

1.  리액트(React)

 
 💡자바스크립트 라이브러리
리액트란 자바스트립트 UI 라이브러리이다.
 

 
💡 SPA(Single Page Application)
SPA는 수많은 웹 페이지를 로딩할 때 최신 업데이트를 신속하게 반영하며,
페이지 로딩 속도를 향상시키고 트래픽을 줄인다.
따라서 페이지가 부드럽게 전환되도록 하고, 업데이트가 될 때까지 기다리는 시간을 단축시킨다.

 
 
ft. Meta
Meta가 만든 오픈 소스 기반 라이브러리.
든든한 지원군인 Meta덕에 웹 개발 시장에서 쉽게 무너질(?) 일은 없다는 것,! 
https://github.com/facebook/react

GitHub - facebook/react: The library for web and native user interfaces.

 
 

---

 
 

2.  리액트 장점과 가상돔(virtual DOM)

 

1. 가상돔(virtual DOM)을 사용한 빠른 업데이트 / 렌더링

 

💡선언형 명령

: 목적만 깔끔하게 명시하여 업데이트가 진행됨.

 

 

 

브라우저는 아래의 과정을 거쳐 화면에 렌더링되어 보여진다.

 

DOM, CSSOM : 브라우저가 자신이 이해하기 쉬운 방식으로 HTML,CSS를 변경하는 것

 

 

화면업데이트는 DOM이 수정되면 일어난다.

이때,  Layout을 다시 수정하는 것은 'Reflow'

Painting을 다시 수정하는 것은 'Repaint' 라고 하며 매우 오래걸리고 복잡한 과정이다.

 

그래서 리액트는 성능 악화를 줄이고자, Virtual DOM(가상돔)을 사용한다! 

 

 

💡  Virtual DOM (가상돔)

 : 웹 페이지와 실제 DOM사이에서 중간 매개체 역할을 한다.

 : DOM을 자바스크립트 객체로 흉내낸 형태

: 버퍼(buffer)역할

virtual DOM은 업데이트 해야 할 최소한의 부분만 검색하여 업데이트하고 다시 자바스트립트로 렌더링한다.
즉, DOM을 직접 수정하지 않는다.

 

 

 
기존 바닐라 자바스크립트의 DOM을 조작하는 방식은 무거운 작동방식이다.
그 이유는 실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다.

그래서 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고

리렌더링 하기 위해 DOM을 만들어 비교하는 방식을 채택한 것이다.

리액트는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 자바스크립트 객체로 따로 관리한다.
직접 DOM 노드를 생성하거나 접근해서 변경을 하는 것이 자바스크립트 객체로 표현된 DOM 트리를 조작하는 것보다 훨씬 느리기 때문이다.
 
*하지만 자바스크립트의 객체를 따로 관리하면서 생기는 메모리 사용량 증가의 단점이 존재한다.

 

 

 

1-2. Virtual DOM (가상돔)의 재조정 과정
 
리액트는 실제 DOM의 UI를 가진 자바스크립트 객체를 메모리상에 가지고 있다.
가상 돔은 변화를 감지하면 재조정(Reconcilation)과정을 통하여 실제 DOM과 동기화 한다.
 

 

💡재조정 과정 3단계
 
1. UI가 변경을 감지하면, UI를 Virtual DOM으로 렌더링한다.
(이때 렌더링은 실제 화면상 렌더링이 아닌, 비교를 위한 가상 렌더링)
 
2. 현재 Virtual DOM과 이전 Virtual  DOM을 비교해서 차이를 계산한다.
 
3. 변경된 부분만 실제 DOM에 반영한다. 

 

 

---

2. 컴포넌트 기반

컴포넌트 단위로 개발, 조립한다.

state변수의 값에 따라 화면에 업데이트할때 자동으로 다른 버전의 UI 가 렌더링된다.

: 특정 변수가 변경되며 선언형 방식으로 화면에 업데이트 된다.

 

 

 

---

3. 재사용성

해당 모듈이 다른 곳에도 쉽게 쓰일 수 있도록 해준다.
이때 다른 모듈의 의존성을 낮춰야한다.

 
 
 

---

 
 
 

3.  리액트 초기 설정 하기

나는 Visual Studio Code 의  터미널을 사용했다.
 
create-react-app(CRA)를 사용한다.
: 프로젝트 생성도구, 리액트로 프로젝트를 실행하는데에 필요한 모든 설정이 되어있음.
 

 

터미널에 아래의 cmd를 입력한다.
 
 "npx create-react-app <파일명>"
 
입력하면, 아래와 같이 패키지를 다운로드하겠다며 진행하겠냐고 묻는다.  y 타이핑! 

 
이후에 이것저것 필요한 패키지 설치를 실행하고, 완료하면 화면과 같이 리액트 웹 어플리케이션이 생성된다.

 
프로젝트 생성이 완료되면,
웹 애플리케이션에서 실행할 수 있는 여러가지 명령어를 보여주며, 성공했다는 메시지를 보여준다.
 
이어서 아래의 cmd로 방금 만든 폴더로 경로를 변경한다.

" cd <파일명>"
 

이어서 애플리케이션을 실행한다.
"npm start"
 

 

 
그럼 자동으로 브라우저가 열리고, React 로고가 빙글빙글 돌아가면 성공적으로 실행된 것!☺️
성공적으로 localhost:3000으로 연결된 것을 확인할 수있다.
 

 
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

* Ref

이미지 출처: 한 입크기로 잘라먹는 리액트

https://ko.legacy.reactjs.org/docs/faq-internals.html

Virtual DOM과 Internals – React

 

 

 

 

 

설명이 부족한 부분이나 피드백은 댓글로 남겨주세요!

감사합니다 ☺️