렌더링이란?

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

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

렌더링이 일어나는 프로세스

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

렌더링 트리거

⭐렌더링이 발생하는 경우?

1. 첫 리액트 앱 실행했을 때
2. 현재 리액트 내부에 어떤 상태(state) 변경이 발생했을 때

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

리액트 앱이 실행되고 첫 렌더링이 일어나면 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 훑으며 컴포넌트가 반환하는 JSX결과물을 DOM요소에 반영한다.

리렌더링

첫 렌더링이 끝난 이후 추가로 렌더링을 트리거 하려면 상태를 변경해주면 된다.
컴포넌트 상태에 변화가 생기면 리렌더링이 발생한다.
여러 상태가 변경되었다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리한다.

1. 음식점 손님이 첫 주문 이후에 추가로 메뉴를 주문하는 것과 같다.
2. 새로운 UI주문이 들어오면(리렌더링) 리액트가 변경된 내용을 주방 요리사인 컴포넌트에 전달하고 컴포넌트는 변경된 주문을 토대로 새로운 요리(UI)를 만든다.
3. 새롭게 만들어진 요리(리렌더링 결과)는 리액트에 의해 다시 손님 테이블에 올려진다. (DOM에 반영)

cf) 브라우저 렌더링?

브라우저의 렌더링과 리액트의 렌더링은 독립적인 프로세스이다.
렌더링이 완료되고 React가 DOM을 업데이트 한 후 브라우저는 화면을 그린다.
이 프로세스를 브라우저 렌더링이라고 하지만 혼동을 피하기 위해 페인팅이라고도 한다.