[React] 리액트 렌더링 과정

리액트 렌더링

리액트에서의 렌더링 개념은 컴포넌트가 ui를 생성하는 과정을 의미한다. jsx를 기반으로 가상의 dom을 만들고 실제 dom에 반영하는 방식으로 동작한다.

리액트 렌더링 종류

• 초기 렌더링 : 리액트 컴포넌트가 처음 실행되고 가상 dom을 생성한다. 가상 dom을 실제 dom에 반영하여 화면에 UI가 나타탄다.
• 업데이트 렌더링(리렌더링) :
  컴포넌트의 props나 state가 변경될 때 다시 렌더링된다.

렌더링 과정

• Render 단계 : 컴포넌트를 가상 dom으로 변환하는 단계. 리액트가 jsx를 가상 dom으로 변환한다.
  기존 dom과 비교하여 변경된 부분을 찾는다. 실제 dom에 적용하기 전에 변경 사항을 미리 계산해둔다. 이때는 실제 dom이 변경되지 않고, 컴포넌트를 순수 함수처럼 실행한다.
• Commit 단계 : 변경된 가상 dom을 실제 dom에 반영하는 단계. 실제 화면에 변화가 생기는 시점이다. dom을 업데이트하고, 애니메이션이나 네트워크 요청을 실행할 수 있다.

렌더링 시점

리액트는 최초 렌더링 - 상태의 변화 - 리렌더링(렌더링)의 단계를 거치며 화면을 그린다.
state의 변화를 일으키는 행위를 트리거(Trigger)라고 하는데, 트리거가 작동되면 컴포넌트는 변화된 내용을 감지하여 리렌더링을 거친다.

useEffect()

useEffect()는 컴포넌트가 리렌더링이 될때마다 실행되는 hook이다.
기본적인 형태는
useEffect(function, deps)
function : 수행 함수, deps : 배열형태의 특정값 로 이루어진다.

import React, { useEffect } from 'react';

//마운트 될때만 실행(최초 렌더링)
useEffect(() => {
	console.log();
}, [])

// 리렌더링 될때마다 실행
useEffect(() => {
	console.log();
})

//특정 props, state가 바뀔때 실행
useEffect(() => {
	console.log(name);
}, [name])