React의 작동 원리

1. MVC 모델이란 ?

MVC 모델은 Model_View_Controller의 약자로

Model 은 애플리케이션에서 사용하는 데이터를 관리하는 영역

View 는 사용자에게 보이는 부분

Controller 는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영

하는 역할을 하는 모델을 의미합니다.

여기서 React의 경우 오직 V(View)만 신경 쓰는 라이브러리 입니다.

2. Component

리액트 프로젝트에서 어떤 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트 ( Component ) 라고 합니다.

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

정의합니다.

 

3. 초기 렌더링 / 리렌더링

 

1) 초기 렌더링

어떤 프레임워크를 사용하든지 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요합니다.

리액트에서는 이를 다루는 render 함수가 있습니다. 

render() { ... } # 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다.

이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다.

render 함수는 그 내부에 있는 컴포넌트들도 재귀적으로 랜더링 과정을 거쳐 정보를 만들고,

위 정보를 사용해 HTML 마크업을 만들고, 이를 우리가 정하는 DOM 요소 안에 주입합니다.

 

2) 리렌더링

컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우는 일을 합니다.

데이터를 업데이트했을 때 단순히 새로운 페이지를 그리는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다.

이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교하여 둘의 차이를 알아내

최소한의 연산으로 DOM 트리를 업데이트 하게 됩니다.

 

리액트에서는 위의 리렌더링을 돕기 위해 Virtual DOM 이라는 것을 사용합니다.

리액트에서 데이터가 변하여 웹 브라우저에 DOM을 업데이트 할 때는 다음 세 가지 절차를 밟습니다.

( 1 ) 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 합니다.

( 2 ) 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.

( 3 ) 바뀐 부분만 실제 DOM에 적용합니다.