1장. 리액트 시작
1.1 왜 리액트인가?
자바스크립트 기반 프레임워크 - Angular, Backbone.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js ...
→ 주로 MVC, MVVM, MVW 아키텍처를 이용하여 애플리케이션을 구조화
※ 공통점: 모델, 뷰 존재
모델(Model) 애플리케이션에서 사용하는 데이터를 관리하는 영역
뷰(View) 사용자에게 보이는 부분
1) 리액트 이해
최대한 성능을 아끼고 편안한 사용자 경험을 제공하고자 페이스북 팀에서 개발한 언어
오직 V(View)만 신경쓰는 자바스크립트 라이브러리
컴포넌트
→ 리액트에서 특정 부분이 어떻게 생길지 정하는 선언체
- 재사용이 가능한 API
- 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의함
렌더링
→ 사용자 화면에 뷰를 보여주는 것
리액트는 언제 렌더링을 수행할까?
- Props 변경 시
- State 변경 시
- forceUpdate() 실행 시
- 부모 컴포넌트 렌더링 시
render 함수
render() {...}- 컴포넌트가 어떻게 생겼는지 정의
- html 형식의 문자열을 반환x, 뷰가 어떻게 생겼고 작동하는지에 대한 정보를 지닌 객체를 반환함
- 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있음
- render 함수를 실행하면 그 내부의 컴포넌트들도 재귀적으로 렌더링을 함
- 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입함
초기 렌더링
→ render 함수를 이용하여 맨 처음에 어떻게 보일지를 정함
※ 컴포넌트를 실제 페이지에 렌더링할 때: 문자열 형태의 HTML 코드 생성 → 특정 DOM에 해당 내용을 주입하면 이벤트가 적용됌
조화 과정(reconciliation): 리액트에서의 뷰를 업데이트할 때 → 새로운 요소로 갈아끼우는 것
컴포넌트는 새로운 데이터를 가지고 render 함수를 또 다시 호출함 (render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 만들었던 컴포넌트 정보와 현재 바뀐 정보를 비교함)
1.2 리액트의 특징
1) Virtual DOM
리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것입니다.
1.1) DOM 이란?
DOM(Document Object Model)
→ 객체로 문서 구조를 표현하는 방법, XML이나 HTML로 작성
트리 형태라서 특정 노드를 수정/제거/삽입할 수 있음
※ 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
DOM vs HTML
HTML: 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. (최초에 화면을 그릴 때 사용하는 설계도)
DOM: HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 쓰일 수 있다.
html 문서의 태그들을 자바스크립트가 이용할 수 있는 객체로 만든 문서 객체 (설계도를 이용하여 실제로 화면에 나타나지는 인터페이스)
1.2) Virtual DOM
실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용함
<데이터 변화 시 웹 브라우저에 실제 DOM을 업데이트 하는 과정>
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.
※ Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아니다. 리액트 메뉴얼에는
"지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기"를 해결하기 위해 만들어졌다고 쓰여있다.
2) 기타 특징
리액트는 오직 '뷰'만 담당하는 라이브러리
※ 리액트는 프레임워크가 아니라 라이브러리다.
다른 웹 프레임워크(Backbone, js, AngularJS)나 라이브러리와 혼용하여 사용 가능하다.