React란?

사용자 인터페이스를 만드는 데 사용되는 JavaScript 라이브러리

서비스의 규모가 커지고, 사용자에게 다양한 인터렉션/동적인 기능을 제공하려면 DOM 요소의 관리가 힘들뿐더러 복잡해지며 성능까지 떨어질 수 있다.

이를 해결하기 위해 페이스북에서 구현한 JavaScript 라이브러리 입니다.

다른 프레임워크 구조(MVC, MVW 등)과 달리 View 만 신경씁니다.

핵심 개념에는 컴포넌트와 렌더링이 있습니다.

컴포넌트

UI를 구성하는 단위이며, 독립적이며 재사용이 가능한 API로 수많은 기능들을 내장하고 있습니다.

렌더링

사용자 화면에 뷰를 보여주는 것을 말합니다.

1. 초기 렌더링

어느 라이브러리/프레임워크를 사용하던지 맨 처음에 어떯게 보일지를 정하는 초기 렌더링이 필요합니다.
리액트에서는 이를 다루기 위해 render() 라는 함수를 사용합니다.

해당 함수는 컴포넌트를 정의하는 역할을 합니다. (뷰의 생김새, 작동 정보를 지닌 객체를 반환)

render() 함수를 실행하면 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 렌더링이 끝나면 가지고 있는 정보들을 사용하여 마크업을 만들고 DOM 요소 안에 주입합니다.

2. 조화 과정

사용자 화면의 뷰를 업데이트할 때 즉, 컴포넌트에서 데이터에 변화가 있을 때
변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 교체됩니다.

DOM에 변경을 하는 것이 아니라 새로운 데이터를 가지고 render 함수를 호출합니다.
그리고 이전에 만들었던 컴포넌트 정보와 비교를 합니다.
비교 후, 둘의 차이를 알아내어 DOM 트리를 업데이트 합니다.

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.