React) 1장 리액트 시작

먼저 기본적으로 알고 들어가야할 정보들을 정리해 보자

 

프래임워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View-Model) 아키택처를 사용한다.

예외적으로, Angular는 MVW(Model-View-Whatever) 아키택처로 어플리케이션 구조화 한다.

※Whatever는 View와 Model을 중개하는 역활을 수행하며 Controller, View, Model 등 다양한 방식의 페턴으로적용됨

 

MVC 아키텍처

- 개발할때, 3가지 형태로 역활을 나누어 개발하는 방법.

- 반영 과정에서 보통 뷰를 변경함

장점

- 비즈니스 처리로직과 사용자 인터페이스 요소들을 분리시켜 서로 영향없이 개발하기 수월한 장점.

- 단순하고 직관적임

단점

- View와 Model 사이의 의존성이 높음

- 의존성이 높으면 어플리케이션이 클 수록 유지보수가 어려워짐

 

 

MVVM 아키텍처

동작

- View를 통해 동작이 들어오면 ViewModel이 Command 패턴으로 Action을 Model에세 데이터 요청을 한 뒤,

  Model이 데이터를 응답해서 ViewModel에 보내면 View

  Model은 데이터를 가공-저장해서 View에 전달하면 DataBinding하여 화면을 나타냄.

- M-V구조는 다른 패턴들과 같으나 ViewModel은 View를 나타내기 위한 데이터 처리를 하는 Model 부분이다.

장점- View 와 Model 사이의 의존성이 없음

- 각각의 부분은 독립적이기 때문에 무듈화 하여 개발할 수 있다.

단점

- ViewModel의 설계가 어렵다.

 

 

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

리액트는 데이터가 변화할때 마다 기존 뷰 영역을 버리고 새롭게 랜더링 하는 방식을 사용(느리고 끊켜보일 수 있다)

 

컴포넌트 : 리액트 프로잭트에서 특정 부분이 어떻게 생길지 정하는 선언체

(다른 프래임워크에서 유저인터페이스를 다룰때 사용하는 템플릿과 다른 개념)

 

컴포넌트는 재사용 가능한 API로 많은 기능을 내장하고있으며 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의한다. 컴포넌트는 복잡하다...

 

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

-초기 렌더링

어떤 UI관련 프래임워크, 라이브러리를 사용하든지 간에 맨처음 어떻게 보일지 정하는 초기 랜더링이 필요함.

리액트에서는 render()함수를 사용하여 컴포넌트의 생김새를 정의하는 역활을 갖음

HTML 형식의 문자열을 반환하지 않고, 뷰의 생김새와 작동방식에 대한 정보를 객체로 반환

 

컴포넌트 내부에는 다른 컴포넌트들이 들어갈 수 있다. 이때 render 함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다.

최상위 컴포넌트의 랜더링이 끝나면 갖고있는 HTML마크업을 만들고, 이를 실제 페이지의 DOM요소 안에 넣어줌

 

컴포넌트의 실제 페이지 랜더링 2단계

1️⃣문자열 형태의 HTML코드 생성

2️⃣DOM에 해당 내용을 주입하여 이벤트 적용

 

🔰조화 과정🔰

리액트에서 뷰를 업데이트할 때 "조화 과정을 거친다" 라고 표현한다.

새로운 요소로 갈아 끼우기 때문이다. 이때도 render() 함수를 사용한다.

 

컴포넌트는 (데이터를 업데이트 할 때)새로운 데이터를 가지고 render() 함수를 또 호출한다.

 

하지만 이때 render() 함수가 반환하는 결과를 바로 DOM에 반영하지 않고, 이전에 render() 함수가 만든 컴포넌트 정보와 현제 render() 함수가 만든 컴포넌트 정보를 비교한 뒤 JavaScript를 이용하여 두가지 뷰를 최소한의 연산으로 비교 후 , 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 함 ( 책에서는 DOM트리에서 변경된 노드를 포함하는 구역을 변경한다고 설명함 )