1장. 리액트 시작

1-1. 왜 리액트 인가?

핵심은 애플리케이션 구조 관리를 어떻게 할 것인가?!

모델(Model, 애플리케이션에서 사용하는 데이터를 관리하는 영역)과 뷰(View, 사용자에게 보이는 부분)가 있는 아키텍처를 주로 사용한다.

MVC(Model-View-Controller) 아키텍처
- 사용자에게 어떤 작업을 받으면 Controller가 Model 데이터를 조회 및 수정하고 변경된 사항을 View에 반영
- 관심사를 잘 분리할 수 있다.
MVVM(Model-View-View Model) 아키텍처
- View Model이 Model의 데이터를 가공하여 View에 반영
MVW(Model-View-Whatever) 아키텍처

반영하는 과정에서 View를 변형하기 위해 업데이트할 부분을 찾고, 변경해야 한다. 애플리케이션의 규모가 크다면 관리가 복잡해지고 어려울 수 밖에 없다.

MVC, MVVM 등의 구조인 프레임워크와 달리 어떻게 변화줄지 고민하는 대신 기존 뷰를 날리고 새로 렌더링하여 최대한 성능은 아끼고 편안한 사용자 경험을 제공하겠다는 리액트가 탄생했다.

오직 View만 신경쓰는 리액트

어떻게 리액트는 새로 렌더링하면서 성능을 아끼고 최고의 사용자 경험을 제공할 수 있을까?

초기렌더링
- 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요
- render() 함수는 컴포넌트가 어떻게 생겼는지 정의 하는 역할
- html형식의 문자열이 아닌 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환
- 컴포넌트 내부에 다른 컴포넌트가 들어갈 수 있으며, render함수 실행시 내부 컴포넌트도 재귀적으로 렌더링 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보를 사용하여 HTML 마크업을 만들고, 실제 페이지의 DOM 요소 안에 주입
조화 과정(업데이트)
- 데이터에 변화가 있을 때 뷰가 변형되는 것이 아닌 render()함수가 새로운 요소로 갈아끼운다
- 새로운 데이터를 가지고 render함수를 다시 호출하여 새로운 데이터를 지닌 뷰를 생성 -> 바로 DOM에 반영하지 않고 이전 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교
- 둘의 차이를 알아내 DOM 트리 업데이트

DOM(Document Object Model)은 객체로 문서 구조를 표현하는 방벙으로 XML이나 HTML로 작성한다.
웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하고 특정 노드를 찾아 수정, 제거, 삽입이 가능하다.

동적 UI에 최적화되어 있지 않다는 것이 DOM의 문제점
DOM 자체를 읽고 쓰는 것은 빠르지만, 웹 브라우저에서 DOM에 변화가 일어나면 CSS를 다시 연산하고, 레이아웃을 구성하고 리페인트해야하기 때문에 느리다.

이를 해결하기 위해서는 DOM을 최소한으로 조작하여 작업을 처리해야한다 -> Virtual DOM의 존재 이유!!