[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.  리액트 장점 & VirtualDOM(가상돔)

 
리액트 공부를 시작하면서 가장 의문이 들었다.
대체 왜 사용하는건가..??? 
 
 
 
1. 빠른 업데이트 / 렌더링
 
💡 Virtual DOM (가상돔) 을 사용하기 때문

Virtual DOM (가상돔)
 : 웹 페이지와 실제 DOM사이에서 중간 매개체 역할을 한다.

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

 
바닐라 자바스크립트의 DOM을 조작하는 방식은 무거운 작동방식이다.
실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문이다.
그래서 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고 리렌더링 하기 위해 DOM을 만들어 비교하는 방식을 채택한 것이다.

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

 

---

Virtual DOM (가상돔)의 재조정 과정
 
리액트는 실제 DOM의 UI를 가진 자바스크립트 객체를 메모리상에 가지고 있다.
가상 돔은 변화를 감지하면 재조정(Reconcilation)과정을 통하여 실제 DOM과 동기화 한다.
 
재조정 과정은 크게 3단계로 나뉜다.
 
1. UI가 변경을 감지하면, UI를 Virtual DOM으로 렌더링한다.
(이때 렌더링은 실제 화면상 렌더링이 아닌, 비교를 위한 가상 렌더링)
 
2. 현재 Virtual DOM과 이전 Virtual  DOM을 비교해서 차이를 계산한다.
 
3. 변경된 부분만 실제 DOM에 반영한다. 

---

2. 컴포넌트 기반

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

 

3. 재사용성

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

 
 
 

---

 
 
 

3.  리액트 초기 설정 하기

나는 visual studio의  terminal을 사용했다.
 
create-react-app(CRA)를 사용한다.
: 프로젝트 생성도구, 리액트로 프로젝트를 실행하는데에 필요한 모든 설정이 되어있음.
 
1. 터미널에 아래의 cmd를 입력한다.
 
            "npx create-react-app <파일명>"
 
입력하면, 아래와 같이 패키지를 다운로드하겠다며 진행하겠냐고 묻는다.  y 타이핑! 

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

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

 

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

 
 
 

---