리액트 렌더링 과정이 헷갈려서 리액트 공식 문서를 보다가 요리 만드는 과정에 비유한 것을 보고 나름대로 이해하기 쉽게 나도 추가해서 정리해보았다.
React 렌더링과 상태 관리 비유
1. 렌더링 (첫 주문)
사용자가 애플리케이션을 처음 로드할 때, React는 컴포넌트를 렌더링하여 초기 UI를 생성합니다. 이는 식당에 첫 주문을 넣는 과정과 같습니다. 이 단계에서 UI는 가상 DOM에 생성됩니다.
2. Real DOM 반영 (첫 서빙)
생성된 UI는 가상 DOM에서 실제 DOM으로 반영됩니다. 즉, 준비된 음식을 손님에게 서빙하는 과정입니다. 음식이 손님에게 처음 제공되는 것과 같은 단계입니다.
3. 상태 관리 (컴플레인(추가주문?) 관리)
사용자가 애플리케이션의 상태를 변경하거나(상호작용) 컴포넌트의 props가 바뀌면, 상태가 업데이트됩니다. 이는 손님이 음식에 대해 컴플레인하거나 피드백을 주는 과정과 같습니다. 상태 변화는 애플리케이션의 UI에 영향을 미치기 때문에, 이 변화는 적절히 관리되어야 합니다.
4. ReactDOM으로 리렌더링 (컴플레인 받은 부분 음식 다시 요리)
상태 변경이 발생하면, React는 새로운 상태를 반영하기 위해 리렌더링을 수행합니다. 이 과정에서 가상 DOM이 업데이트되고, 필요한 변경 사항이 계산됩니다. 이는 컴플레인에 따라 음식을 다시 요리하거나 수정하는 과정과 같습니다. 즉, 상태 변경에 따라 UI를 새로 만들어야 합니다.
5. Real DOM 반영 (다시 서빙)
수정된 UI는 계산된 차이만큼만 실제 DOM에 반영됩니다. 이를 통해 사용자에게 업데이트된 상태의 UI를 제공하게 됩니다. 이는 다시 요리된 음식을 손님에게 다시 서빙하는 것과 유사합니다. 최종적으로는 사용자에게 최신의 상태가 반영된 UI를 보여줍니다.
렌더링 (첫 주문): 초기 UI를 가상 DOM에 생성합니다.
Real DOM 반영 (첫 서빙): 가상 DOM의 UI를 실제 DOM에 반영합니다.
상태 관리 (컴플레인 관리): 상태 변화에 따른 피드백을 관리합니다.
ReactDOM으로 리렌더링 (컴플레인 받은 부분 음식 다시 요리): 상태 변경에 따라 가상 DOM을 업데이트하고 새로운 UI를 생성합니다.
Real DOM 반영 (다시 서빙): 업데이트된 UI를 실제 DOM에 반영하여 사용자에게 제공합니다.
