1. 리액트

리액트는 구조가 MVC, MVW등인 프레임워크와 달리, 오직 V(view)만 신경쓰는 라이브러리이다. 리액트 프로젝트에서 특정부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트라고 한다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

👀API?
**API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체
1. API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
2. API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
3. API는 모든 접속을 표준화한다.

👀컴포넌트?
**프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

1-1.초기렌더링

맨 처음 화면을 어떻게 보일지를 정하는 초기렌더링. 리액트에는 이를 다루는 render함수가 있다. 이 함수는 html형식의 문자열이 아닌 뷰가 어떻게 생기고, 어떻게 작동 하는지에 대한 정보를 지닌 객체를 반환한다.

render() { ... }

컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있으며, 이때 render함수를 실행하면 내부 컴포넌트들도 재귀적으로 렌더링한다. 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용해 HTML마크업을 만들고, 실제 페이지 DOM요소 안에 주입한다.

렌더링 ▶ HTML마크업<div>...</div> ▶ DOM ▶ 화면

1-2.조화 과정

리액트에서 뷰를 업데이트할 때는 '조화 과정'을 거친다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우는 것이다. 이 작업을 render 함수가 맡아서 한다. 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다. 자바스크립트를 사용해 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM트리를 업데이트 한다.

1-3.Vitual DOM

리액트는 Virtual DOM을 사용한다.

👀DOM?
**Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로
XML이나 HTML로 작성한다.
특징)
1.웹 브라우저는 DOM을 활용하여 객체에 JS와 CSS를 적용하는데, DOM은 트리 형태라서 특정 노드를 찾거나,
수정하거나, 제거하거나 원하는 곳에 삽입할 수 있다.
2.동적 UI에 최적화되어 있지 않다.

DOM을 최소한으로 조작하기 위해 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리횟수를 최소화하고 효율적으로 진행한다. 이를 사용하면 실제 DOM에 접근하여 조작하는것이 아닌 이를 추상화한 JS객체를 구성하여 사용한다.

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

1-4.기타특징

리액트는 프레임워크가 아닌 라이브러리이다. Ajax, 데이터 모델링, 라우팅과 같은 기능을 내장하고 있는 웹프레임워크와 달리 리액트 뷰는 정말 '뷰'만 신경 쓰는 라이브러리이다. 하지만 다른 개발자들이 만든 라이브러리를 사용하여 빈자리를 채울 수 있다.(ex. axios, fetch, redux...)또한 리액트는 다른 웹 프레임워크나 라이브러리와 혼용할 수도 있다.

리액트를 다루는 기술을 읽고 요약한 글 입니다😊