1.1.1 리액트 이해
- 구조가 MVC, MVW인 프레임워크와 달리, 오직 V만 신경 쓰는 라이브러리
- 컴포넌트:
- 특정 부분이 어떻게 생길지 정하는 선언체
- 재사용이 가능한 API로 수많은 기능을 내장
1.1.1.1 초기렌더링
어떤 UI 관련 프레임워크, 라이브러리르 사용해도 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요 => render() 함수
- 리액트에서 뷰를 업데이트 할 때는 "조화(reconciliation)"를 거친다.
- 데이터 변화가 뷰의 변형으로 보이지만 사실 새로운 요소로 갈아 끼우기 때문이다.
이러한 작업도 render() 함수가 맡아서 한다. - render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
- 컴포넌트는 데이터를 업데이트할 때 새로운 데이터를 가지고 render를 다시 호출 -> 그 데이터를 가진 view 생성
- 그러나 바로 DOM에 반영하지 않고 이전 render함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교
- 둘의 차이를 최소한의 연산으로 비교 후 DOM 트리 업데이트
1.2 Virtual DOM
1.2.1.1 DOM이란?
DOM: Document Object Model
- 객체로 문서 구조를 표현하는 방법(XML/HTML)
DOM API
- 치명적 문제점: 동적 UI에 최적화가 안됨
- "요즘 자바스크립트 엔진은 매우 빠른데, DOM은 느리다" => 정확한 말 X
- DOM 자체는 빠르다. DOM 자체를 읽고 쓸 때 성능 ~= 자바스크립트 객체 처리 성능
- 단, 웹 브라우저단에서 DOM 변화가 일어나면 웹 브라우저가 CSS 다시 연산, 레이아웃 구성, 페이지를 리페인트 한다. 이 시간이 길다.
1.2.1.2 Virtual DOM
Virtual DOM은 실제 DOM에 작업하는 게 아니라 자바스크립트 객체를 사용, 마치 실제 DOM의 가벼운 사본과 비슷하다.
리액트는 VDOM을 사용해서 DOM 업데이트를 추상화하고 DOM 처리 횟수를 최소화
리액트 데이터가 변하면 실제 DOM 업데이트 과정
- 데이터를 업데이트하면 UI를 VDOM에 리렌더링
- 이전 VDOM 내용과 현재 내용 비교
- 바뀐 부분만 실제 DOM에 적용
단, VDOM을 사용한다고 무조건 빠른 것은 아니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 위하여 리액트를 만들었다.
1.2.2 기타 특징
일부 웹 프레임워크가 MVC/MVW 구조를 지향하는 것과 달리 리액트는 오직 뷰만 담당. 리액트는 프레임워크가 아니라 라이브러리
1.3 작업 환경
리액트 프로젝트는 Node.js(크롬 V8 자밧그크립트 엔진으로 빌드한 자바스크립트 런타임) 사용 필수
이를 사용함으로써 웹브라우저가 아닌 곳에서도 JS 사용 연산 가능하다.
- nvm 설치
- yarn 설치
npm install -g yarn- 에디터 (vscode) 설치
- react 앱 설치
yarn create react-app hello-react
cd hello-react
yarn start
컨셉입니다~