2021-06-14

1장 리액트 시작

1.1 왜 리액트인가?

자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔다. 수많은 프레임워크가 다양한 관점을 통해서 애플리케이션과 프론트엔드 사이에서 애플리케이션의 구조를 관리하기 위해서 발명되었다.

아키텍쳐 패턴 (= 디자인 패턴) : 건축으로치면 공법에 해당하는 것으로 소프트웨어의 개발 방법을 공식화 한 것이다. 소수의 뛰어난 엔지니어가 해결한 문제를 다수의 엔지니어들이 처리할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션 효율성을 높이는 기법이다. (위키피디아 참고)

MVC 패턴 : Model-View-Controller

MVC 패턴 MDN 설명 바로가기

MVVM 패턴 : Model-View View-Model

MVVM 패턴 설명 박스여우 블로그 바로가기 박스여우님 블로그를 참고 하였습니다.

MVW 패턴 : Model-View-Whatever

---

리액트의 이해

• 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용된다. 위의 디자인패턴을 가진 프레임워크와 달리 오직 View만 신경쓰는 라이브러리이다.
  

• 리액트 프로젝트에서 특정 부분이 어떻게 생길지 결정하는 선언체가 있는데, 이를 컴포넌트라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의하게 된다.
  

• 초기 렌더링은 어떤 프레임워크를 사용하든지 간에 맨 처음에 어떻게 보일지를 정하기 때문에 필요하다. 리액트에서는 render 함수를 사용하게 된다.

render() { … }

이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환하게 된다. render 함수를 실행하게 되면 내부에 있는 컴포넌트들을 재귀적으로 렌더링하게 된다.

render() 작동 원리

• 리액트에서 뷰를 업데이트할 때는 “업데이트 과정을 거친다” 라고 하기보다 “조화과정을 거친다” 라고 하는 것이 더 정확한 표현이다. 컴토넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문이다. 이는 render 함수가 처리하는데 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교하게 된다.

1.2 리액트의 특징

• DOM은 Document Object Model의 약어로 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다.

출처 [https://www.w3schools.com/whatis/whatis_htmldom.asp]

• 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.

• Virtual DOM은 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 따른다.

  1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 한다.
  2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
  3. 바뀐 부분만 실제 DOM에 적용한다.

• Virtual DOM을 사용한다고해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 안디ㅏ. 리액트는 “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기” 를 매뉴얼에 명시한다.

• 리액트는 프레임워크가 아니라 라이브러리이다. 라우팅에는 react-router, Ajax 처리에는 axios나 fetch, 상태 관리는 redux나 MobX를 사용한다. 해당 분야에 있어서 여러가지 라이브러리가 존재하기 때문에 골라서 사용하면 된다.

• 리액트는 다른 웹 프레임워크나 라이브러리와 혼용하여 사용할 수 있다. Angular.js + Backbone.js

1.3 작업 환경 설정

1. Node.js 와 npm : 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산 가능함.

2. 개발도구 : ECMAScrpit를 호환시켜주는 babel, 리로딩 Webpack

3. 에디터 : Visual Studio Code

4. 패키지 매니져 : yarn

5. 프로젝트 생성

yarn create react-app ${project-name}