1장. 리액트 시작

1.1 왜 리액트인가?

 

- Javascript만으로 큰 규모의 Application 만드는 시대임.

-> Angular, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 등 여러 프레임워크들은

MVC(Model-View-Controller) 아키텍쳐, MVVM(Model-View-View-Model) 아키텍쳐를 사용함.

 

하지만!!!!

 

React는 오직 V(View)만 신경 쓰는 라이브러리임.

 

컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체.

렌더링: 사용자 화면에 뷰를 보여주는 것

 

초기 렌더링 VS 리렌더링

 

초기 렌더링을 하면 내부 컴포넌트들이 재귀적으로 렌더링하고 / 그 결과 가지게 된 정보들로 HTML 마크업을 만들고 / 페이지의 DOM요소 안에 주입하여 페이지를 보여주게 됨.

반면 리렌더링은 초기 렌더링과 똑같이 진행되지만 DOM요소에 주입 시,

기존 DOM에 반영된 컴포넌트 정보와 최소한의 연산으로 비교

-> 둘의 차이를 알아내어 DOM 트리를 업데이트함.

 

즉, 다시 처음 루트 노드부터 렌더링하는 것처럼 보이기는 하지만 실제론 최적의 자원으로 수행하여 업데이트해주는 것!

 

1.2 리액트의 특징

DOM(Document Object Model): 객체로 문서 구조를 표현하는 방법. XML, HTML로 작성됨.

 

DOM은 동적 UI에 최적화 X

-> 엥? 그럼 느림?

-> 사실 빠르다. 하지만 DOM에 변화가 일어나면 웹 브라우저가 CSS 재연산, 레이아웃 구성, 페이지 리페인트 등을 하여 시간이 허비됨...

 

이를 막고자 나온게 있으니...!! 두둥탁...!! Virtual DOM

 

어케 씀?

1. 데이터를 업데이트하면 전체 UI가 일단 Virtual DOM에 리렌더링됨.

2. 이전 Virtual DOM 내용과 현재 내용과 비교함.

3. 바뀐 부분만 실제 DOM에 주입

 

이를 통해...

'업데이트 처리 간결성' 즉, UI 업데이트 과정에서 생기는 복잡함을 모두 해소하고, 쉽게 업데이트에 접근할 수 있음!

 

중요한 것!

React는 프레임워크X, 라이브러리O

딴 건, 다 신경 못쓰는 단순 '라이브러리'일 뿐...!

하지만 다른 개발자들이 만든 라이브러리(ex. Redux, axios 등)를 쓰면 됨. + 다른 웹 프레임워크, 라이브러리 등과 혼용 가능.

GOOD!!!

 

1.3 작업 환경 설정

nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh|bash

~/.bash_profile에 추가 사항

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh"]&& \. "$NVM_DIR/nvm.sh" #이건 nvm 실행하는 코드임.

Node.js LTS 버전 설치

nvm install --lts

 

Yarn: npm을 대체할 수 있는 도구로 npm보다 더 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공함.

npm install --global yarn

프로젝트 생성하기

yarn create react-app 프로젝트명