React는 어떻게 화면을 그릴까? 렌더링 과정 전격 해부

React의 렌더링 과정은 컴포넌트가 어떻게 UI로 변환되고, 상태(state)나 속성(props)이 바뀔 때 어떻게 화면이 갱신되는지를 설명합니다. 아래는 함수형 컴포넌트를 기준으로 React의 렌더링 과정을 단계별로 정리한 것입니다.

🔄 React 렌더링 과정 (Function Component 기준)

1. 컴포넌트가 호출됨

• React는 함수형 컴포넌트를 일반 함수처럼 실행해서 JSX를 반환받습니다.
• JSX는 React Element로 변환됩니다.

function MyComponent(props) {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

➡️ 위 함수가 호출되어 <div>0</div> 형태의 Virtual DOM이 만들어짐

---

2. 가상 DOM(Virtual DOM) 생성

• JSX → React.createElement 호출 → Virtual DOM 구조로 구성됨
• Virtual DOM은 실제 DOM을 추상화한 JS 객체입니다.

---

3. 비교 (Reconciliation)

• React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교(diff) 합니다.
• 변경된 부분만 실제 DOM에 반영하려고 함.

---

4. 실제 DOM(DOM Tree) 업데이트

• 변경된 부분만 실제 브라우저의 DOM에 적용합니다.
• 이 과정을 "DOM 패치"라고 부르며, 성능을 위해 효율적으로 작동합니다.

---

5. useEffect 등 Side Effect 처리

• 화면에 렌더링된 후에 useEffect(() => {...})가 실행됩니다.
• 비동기 작업, 이벤트 등록 등은 이 단계에서 수행.

---

🧠 렌더링이 발생하는 조건

1. 상태(state) 변경

   • setState, useState, useReducer로 상태 변경 시 렌더링

2. props 변경

   • 부모 컴포넌트가 자식에게 전달한 값이 바뀌면 자식 컴포넌트도 리렌더링

---

✅ 최적화를 위한 도구

도구/기능	역할
React.memo	props가 바뀌지 않으면 렌더링 생략 (함수형 컴포넌트)
useMemo, useCallback	불필요한 연산이나 함수 재생성을 방지
shouldComponentUpdate	클래스 컴포넌트에서 렌더링 여부 제어

---

🧩 예시로 보는 렌더링 흐름

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('렌더링 후 실행'); // 실제 DOM 업데이트 후 실행
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

1. 처음 렌더링

   • 컴포넌트 함수 호출 → JSX 반환 → Virtual DOM 생성 → 실제 DOM 생성 및 삽입 → useEffect 실행

2. 버튼 클릭

   • setCount로 상태 업데이트 → 컴포넌트 다시 호출 → 새로운 Virtual DOM → 변경 감지 → DOM 패치 → useEffect 재실행

---

요약

단계	설명
컴포넌트 호출	JSX 반환
JSX → Virtual DOM	JS 객체 구조화
Virtual DOM 비교	이전과 새 Virtual DOM 비교 (Reconciliation)
DOM 업데이트	변경된 부분만 실제 브라우저에 반영
Side Effect 실행	useEffect 등 후처리 실행

---

SideEffect 함수형 컴포넌트로 관리하는 방법

함수형 컴포넌트의 생명주기 함수형 컴포넌트에서는 useState, useEffect와 같은 React 훅을 사용하여 생명주기를 관리합니다. 함수형 컴포넌트에서의 생명주기 흐름은 다음과 같습니다:

1. 컴포넌트 마운트 시:

• useEffect(() => {...}, []): 빈 배열을 두 번째 인수로 전달하면 컴포넌트가 처음 마운트될 때만 실행됩니다.

2. 컴포넌트 업데이트 시:

• useEffect(() => {...}, [dependency]): dependency 값이 변경될 때마다 실행됩니다.

3. 컴포넌트 언마운트 시:

• useEffect(() => {...}, [])의 반환 값으로 클린업 함수를 반환할 수 있습니다. 이 함수는 컴포넌트가 언마운트될 때 호출됩니다.