[React] Component와 Rendering

1. Component란?

컴포넌트는 리액트에서 사용하는 UI요소를 표현하는 최소한의 단위이며 UI요소를 화면에 표현해주는 선언체 입니다. 선언체하는 개념은 리액트 이전의 명령형 프로그래밍과 반대되는 개념입니다. 

 

명령형 프로그래밍

명령형으로 작성된 코드의 경우 Hello, World!를 출력하기 위해 컴퓨터가 수행하는 절차를 일일히 코드로 작성해주어야 합니다.

// Hello, World! 화면에 출력하기
// 순수 javaScript 명령형 코드
const root = document.getElementById('root'); 
const header = document.createElement('h1'); 
const headerContent = document.createTextNode(
	'Hello, World!'
);

header.appendChild(headerContent); 
root.appendChild(header);

선언형 프로그래밍

React 코드의 경우 내가 UI을 선언하고 render 함수를 호출하면 React가 알아서 절차를 수행해 화면에 출력합니다.. 즉, 화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어 있습니다.

// React 코드 (선언적인)
const header = <h1>Hello World</h1>; // jsx
ReactDOM.render(header, document.getElementById('root'));

2. Rendering이란?

컴포넌트가 현재 props와 state의 상탸에 기초하여 ui를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미합니다. 

 

랜더링이 일어나는 프로세스를 웨이터와 주방장의 관계로 표현할 수 있습니다.

• UI - 음식
• 컴포넌트 - 음식을 만드는 주방장
• 리액트 - 웨이터

1. 렌더링 일으키는 것은 (triggering)- UI를 주문하고 주방으로 전달하는 것
2. 렌더링한다는 것은 (rendering)- 주방에서 컴포넌트가 UI를 만들고 준비하는 것
3. 렌더링 결과는 실제 DOM에 커밋한다는 것은 (commit) - 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

2-1. 렌더링 트리거

렌더링이 발생하기 위해선 다음과 같은 상황이 발생되어야 합니다.

1. 첫 리액트 앱을 실행했을 때
2. 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
   • 컴포넌트 내부 state가 변경되었을 때
   • 컴포넌트에 새로운 props가 들어올 때,
   • 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

2-2. re-rendering

첫 렌더링은 자동으로 실행되고 state 값의 변화에 따라 다시 렌더링이 발생하는 것을 리렌더링이라고 합니다. 이때 여러 상태가 변경될 경우 리액트는 큐 자료구조에 넣어 순서를 관리합니다.

1. 주방 예시를 다시 들어보면 리렌더링은 음식점 손님이 첫 주문 이후에 갈증이 생겨 추가로 음료를 주문하거나 처음 받은 음식이 마음에 들지 않아 새로운 메뉴를 주문하는 것과 같습니다.
2. 새로운 UI주문(리렌더링)이 일어나면 리액트가 변경된 내용을 주방에 있는 요리사인 컴포넌트에 전달하고 컴포넌트는 새로운 변경된 주문을 토대로 새로운 요리(UI)를 만듭니다.
3. 새롭게 만들어진 요리(렌러딩 결과)는 리액트에 의해 다시 손님 테이블에 올려집니다(DOM에 반영 - commit phase).