React.js의 렌더링 방식 살펴보기 | Notion

📌 목차

React 렌더링의 기본 개념
렌더링이 발생하는 조건
Virtual DOM과 Diffing 알고리즘
렌더링 최적화 전략 (예: memo, useMemo 등)
CSR vs SSR vs ISR (Next.js 포함 시)
요약 및 Q&A

1. React 렌더링 기본 개념

React는 UI를 상태(state)에 따라 그리는 선언적 프레임워크입니다.
컴포넌트가 상태나 props의 변화에 따라 렌더링을 다시 수행합니다.

📌 "렌더링"이란?

컴포넌트 함수가 다시 실행되어 JSX → Virtual DOM → 실제 DOM 반영까지의 과정

2. 렌더링이 발생하는 조건

컴포넌트가 다시 렌더링되는 주요 원인:

트리거	설명
`props` 변경	부모 컴포넌트로부터 전달값이 바뀜
`state` 변경	useState 등 훅을 통해 상태 변경
`context` 값 변경	useContext로 구독한 값이 바뀜
`forceUpdate()` 호출	강제로 렌더링 수행 (잘 안 씀)
부모 컴포넌트가 리렌더링된 경우	자식도 기본적으로 함께 렌더링됨

3. Virtual DOM & Diffing

Virtual DOM: 실제 DOM이 아닌 메모리 상의 가상 DOM