[5주차] 리액트입문: component, rendering, browser rendering

component

 

컴포넌트란?

UI 요소를 표현하는 최소한의 단위이며 화면의 특정부분이 어떻게 생길지 정하는 선언체이다. 리액트의 핵심 빌딩 블록 중 하나이다. 컴포넌트 단위로 기능을 개발하면서 UI 구축 작업을 용이하게 할 수 있다. 

 

명령적 프로그래밍 ( 예: DOM ) VS  선언적 프로그래밍 ( 예: React ) 

 

명령적 프로그래밍 DOM

HOW 를 중요하게 여기며, 프로그램의 제어의 흐름 방법을 제시하고 목표를 명시하지 않은 형태

컴퓨터가 수행하는 저라를 일일히 코드로 작성

 

선언적 프로그래밍 React

What 을 중요하게 여기며, 제어의 흐름보단 원하는 목적을 중요하게 여긴다

화면에 어떻게 그려야 할지(UI)는 JSX 문법 영역 안에 이미 넣어져 있고, 이미 준비되어 있는 것을 랜더링함으로써 화면에 보이게 하는 형태

---

rendering

리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업

 

rendering 프로세스

trigger  → rendering  → commit

UI : 음식
컴포넌트: 주방장
리액트: 웨이터

 

trigger  : 렌더링을 일으키는 것 UI를 주문하고 주방으로 전달

rendering : 렌더링 하는 것 주방에서 컴포넌트가 UI를 만들고 준비하는 것

commit : 렌더링 결과를 실제 DOM에 커밋하는 것 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

 

rendering trigger
: 첫 리액트 앱을 실행했을 때 일어남
: 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때 일어남

1) 컴포넌트 내부 state가 변경되었을 때
2) 컴포넌트에 새로운 props가 들어올 때
3) 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

---

re-rendering
: 첫 렌더링을 자동으로 일어남 ( 리액트앱 실행 -> 리액트가 전체 컴포넌트 렌더링 -> 그 결과물 DOM에 반영하여 브라우저에 보여줌
: 그 이후의 렌더링은 컴포넌트 상태(state)에 변화가 생기면 발생함
: 만약 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리함

1) 손님이 첫 주문 이후에 추가 주문
2) 새로운 UI 주문(리렌더링)이 일어나면 리액트가 변경된 내용을 주방장(컴포넌트)에게 전달하고, 주방장(컴포넌트)는 변경된 주문을 토대로 새로운 요리(UI)를 만든다
3) 새롭게 만들어진 요리(랜더링결과)는 리액트(웨이터)에 의해 다시 손님 테이블 위로 올려지게 된다(DOM 반영 - commit phase)

---

browser rendering

브라우저의 렌더링과 리액트의 렌더링은 엄연히 다른 독립적인 프로세스다.

렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저는 화면을 그린다.

이 프로세스를 "브라우저 렌더링"이라고 하지만 혼동을 피하기 위해 "페인팅"이라고도 한다.