🟦[React] React의 화면 업데이트 3단계

✅ React의 화면 업데이트 3단계

=> 바뀐 부분만 화면 업데이트가 됨

ex) useState가 하나 있는데 이걸 사용하는 버튼이 있다고 치면

<button>여기는 console 1</button> -> useState 사용

<button>여기는 console 2</button>

==> console 1 만 리렌더링 됨

 

1. 트리거 (Trigger)

React에게 "화면을 다시 그려야 해!"라고 알리는 단계

예시 (트리거가 되는 행동들):

• setState() 호출
• 부모 컴포넌트가 리렌더링되면서 props가 바뀜
• useReducer, useContext 등의 값 변경
• 외부 이벤트(예: 클릭, 네트워크 응답 등)

jsx

복사편집

const [count, setCount] = useState(0); <button onClick={() => setCount(count + 1)}>+</button>

이렇게 setCount를 호출하면 **화면을 업데이트해야 한다는 신호(트리거)**가 발생해.

---

2. 렌더링 (Rendering)

컴포넌트를 다시 호출해서 JSX를 계산하는 단계

이 단계에서 React는:

• 변경된 state/props 기반으로 컴포넌트 함수를 다시 실행
• 새로운 Virtual DOM (가상 DOM) 트리를 만듦
• 이전 Virtual DOM과 비교(Diffing)해서 어떤 변경이 생겼는지 파악

이때 화면은 실제로 바뀌지 않아!
그냥 "무엇이 바뀌었는지" 판단하는 단계야.

---

3. 커밋 (Commit)

계산된 변경 사항을 실제 브라우저 DOM에 반영하는 단계

이 단계에서 React는:

• 화면(DOM)을 업데이트함
• useEffect 등의 사이드 이펙트 함수 실행
• ref 변경 반영

jsx

복사편집

useEffect(() => { console.log("DOM이 실제로 바뀐 후 실행됨"); }, [count]);

useEffect는 바로 이 커밋 이후에 실행돼.
즉, 화면이 실제로 바뀐 다음에 동작함.

---

🧠 요약

단계무엇을 하나요?관련 예시

트리거	상태 변경을 감지	setState, props 변경 등
렌더링	JSX → Virtual DOM 계산	컴포넌트 함수 재실행
커밋	DOM 변경 + useEffect 실행	실제 브라우저 화면 업데이트