React의 리렌더링 과정에 대해 설명해주세요.
분야: 프론트엔드
React의 리렌더링 과정은 크게 Trigger, Render, Commit이라는 세 단계로 나눌 수 있습니다.
먼저 Trigger 단계는 컴포넌트의 state나 props가 변경되면서 시작됩니다. 사용자의 입력, 네트워크 응답 등의 이벤트에 의해 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링해야 한다고 판단합니다. 이때 React는 내부적으로 업데이트 큐에 해당 변경 사항을 등록합니다.
그다음 Render 단계에서는 변경된 상태를 바탕으로 새로운 Virtual DOM 트리를 생성합니다. 그후, 이전 Virtual DOM과 새 Virtual DOM을 비교하여 어떤 부분이 바뀌었는지를 분석합니다. 중요한 점은 이 시점에서는 실제 DOM에는 아무런 변경도 일어나지 않는다는 사실입니다.
마지막으로 Commit 단계에서는 이전 단계에서 분석된 변경 사항을 실제 DOM에 반영합니다. React는 변경에 필요한 최소한의 작업을 적용하여 DOM을 업데이트합니다. 변경이 발생하지 않은 요소는 수정하지 않고 그대로 둡니다. 이 단계에서 사용자에게 화면의 변화가 실제로 나타나게 됩니다.
setState()가 호출될 때마다 매번 리렌더링이 발생하나요? 🤔
아니요. React의 auto batching 기능으로 인해, 여러 개의 상태 변경이 자동으로 하나의 batch로 묶여서 처리됩니다.
function App() {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
const handleClick = () => {
setA(a + 1);
setB(b + 1); // 이 둘은 하나로 합쳐져서 리렌더 1번
};
return <button onClick={handleClick}>Click</button>;
}