1.1 왜 리액트인가
- MVC Model-View-Controller
- MVVM Model-View-View- Modeal
- MVW Model-View-Whatever
- 모델(Model)
애플리케이션에서 사용하는 데이터를 관리하는 영역 - 뷰(View)
사용자에게 보이는 부분
어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식을 고안했다. 이렇게 되면 더 이상 어떻게 변화를 줄지 신경 쓸 필요가 없고 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링 하면 되기 때문이다.
리액트는 오직 V(View)만 신경쓰는 라이브러리이다.
render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있는데 이때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다.
리액트에서 뷰를 업데이트 할 때 "조화 과정을 거친다(reconciliation)"고 한다. render 함수가 새로 호출됐을 때 이전에 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교해 바뀐 부분을 DOM 트리에 업데이트한다.
1.2 리액트의 특징
- DOM Document Object model
객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.
HTML은 자체적으로 정적이고 자바스크립트를 사용하여 이를 동적으로 만들 수 있는 것이다. 그래서 이는 동적 UI에 최적화되어 있지 않다는 단점이 존재한다.
이는 현대의 웹 동작에는 큰 단점으로 작용한다.
따라서 DOM을 최소한으로 조작하기 위해 Virtual DOM 방식으로 사용한다.
- Virtual DOM
실제 DOM을 추상화한 자바스크립트 객체를 구성해 사용한다. 이는 실제 DOM의 가벼운 사본과 비슷하다.
리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는(단순 라우팅 정도만 있는 정적인 페이지) 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 한다.
리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 바로 업데이트 처리 간결성이다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있다는 것이다.
우리는 다음 문제를 해결하려고 리액트를 만들었습니다.
지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기1.3 작업 환경 설정
- Node.js
크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임.
이를 이용해 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있다.
리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적은 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하는 것이다.
- npm
Node.js 패키지 매니저 도구이다.
이를 사용해 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있다.
