React-리액트 기본 개념, 기본 프로젝트 생성

리액트가 개발되게 된 배경

-자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔음

-하지만 자바스크립트만으로만 관리하려면 프로젝트가 너무 크므로, 여러 프레임워크(Angular.js, Vue.js 등)들이 MVC, MVVM, MVW 등의 아키텍쳐 등으로 애플리케이션을 구조화하려는 시도를 했음

-이런 아키텍쳐의 공통점: 모델과 뷰가 있다

모델: 애플리케이션에서 사용하는 데이터 관리 영역

뷰: 유저에게 보이는 부분

즉, 프로그램이 유저에게서 어떤 작업을 입력받으면 컨트롤러가 변경된 사항을 뷰에 반영

-이 '반영'과정에서 문제가 있었는데, 일부만 반영하기엔 반영할 부분을 코드에서 찾아내야 하는 번거로웠음

-리액트는 그냥 기존 뷰 전체를 날리고 다시 새로 렌더링 하는 방식을 채택

-새로운 문제: CPU점유율 문제, 입력하다 렌더링 되면 끊기는 문제 등

-리액트는 View만 사용해서 리렌더링하므로써 해결

 

리렌더링

1) 초기 렌더링

render() {...}

이 render 함수 안에서 초기 렌더링할 것을 정의한다

 

render함수가 실행되면 내부의 컴포넌트들도 재귀적으로 렌더링 된다

이렇게 최상위 컴포넌트까지 렌더링 작업이 끝나면, 정보들로 HTML 마크업을 만들어 실제 페이지의 DOM 요소 안에 주입한다

 

2) 조화 과정

리액트에서 뷰를 업데이트할 때는 '업데이트 과정을 거친다'라는 표현을 '조화 과정을 거친다'라고 하는 게 더 정확하다

왜냐하면 뷰가 변형되는 것처럼 보이지만 사실은 새로운 요소로 갈아 끼우고 있기 때문이다

그리고 이 작업도 render가 맡아서 한다

 

아까 렌더링이 끝나면 DOM 요소 안에 주입한다고 했는데, 이 때 이걸 곧바로 DOM에 반영하지 않는다

그 전에 이전 render함수가 만든 컴포넌트와 현재 render함수가 만든 컴포넌트 정보를 비교한다

한 마디로, DOM 트리에서 변경된 부분(차이)을 확인, 최소한의 연산으로만 DOM 트리를 업데이트 한다

 

결국 방식 자체는 루트 노드부터 전체 컴포넌트를 다시 렌더링하는 듯이 보이지만, 사실 최적의 자원을 사용하여 변경된 부분만 수행한다

 

Virtual DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것이다

 

-DOM

객체로 문서 구조를 표현하는 방법으로, XML이나 HTML로 작성한다

웹 브라우저는 DOM으로 객체에 자바스크립트와 CSS를 적용한다

DOM은 트리 형태라서 특정 node를 찾거나 수정하거나, 제거, 삽입 등이 쉽다

 

DOM의 단점은, 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 잦으면 성능 저하가 생긴다

이 문제를 Virtual DOM으로 해결했다

 

-Virtual DOM

가상DOM을 사용하면 실제 DOM에 접근하지 않고, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다

실제 DOM의 가벼운 사본과 비슷하다

 

DOM 업데이트 절차

1) 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링

2) 이전 Virtual DOM에 있던 내용과 현재 내용 비교

3) 바뀐 부분만 실제 DOM에 적용

 

아까 리렌더링에서 리렌더링 후에 바뀌는 새로운 DOM트리가 바로 이런 절차를 통해 나온 Virtual DOM이다

 

Virtual DOM이 실제로 DOM보다 빠를까?

Virtual DOM은 '지속적으로 데이터가 변화하는 대규모 애플리케이션'에서 사용될 때 비로소 진가를 발휘한다

솔직히 말하면, 작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 더 빠를 수도 있다

리액트의 장점인 업데이트 처리 간결성을 잘 살리는 곳에 잘 사용하도록 합시다

 

 

리액트 프로젝트 생성

npm, yarn, vscode와 확장 프로그램, git까지 설치를 했으면 이제 기본 프로젝트를 생성해본다

 

vscode의 터미널에 create-react-app <프로젝트 이름> 명령어 사용

$ crate-react-app hello-react

 

생성이 끝나면 yarn start로 프로젝트 개발 서버를 실행한다

$ cd hello-react
$ yarn start

 

http://localhost:3000/ 페이지가 자동으로 뜨면 이제 리액트를 공부할 준비가 된 것입니다