AI 요약관련 정보

• React의 상태 업데이트는 겉보기에는 즉각적이지만, 실제로는 화면에 변화가 반영되기 전까지 '트리거', '렌더', '커밋'의 세 가지 중요한 단계를 거칩니다. ⚙️
• 이러한 다단계 과정을 이해하는 것은 React 애플리케이션이 수백 개의 컴포넌트로 확장되어도 빠른 성능을 유지하는 핵심 원리를 파악하는 데 중요합니다. 🚀
• 트리거 단계: setCount와 같은 상태 설정 함수를 호출하는 순간 시작됩니다. 이 단계에서는 UI가 즉시 변경되지 않고, React에게 해당 컴포넌트가 업데이트가 필요함을 알립니다. 🔔
• 렌더 단계: React가 컴포넌트 함수를 다시 호출하여 새로운 JSX를 반환받고, UI의 어떤 부분이 업데이트되어야 하는지 계산하는 단계입니다. 이 단계에서도 화면은 아직 변경되지 않습니다. 🎨
• 커밋 단계: 렌더 단계에서 계산된 변경 사항을 실제 DOM에 적용하는 최종 단계입니다. React는 변경된 부분만 선택적으로 업데이트하여 DOM 조작을 최소화하고 성능을 최적화합니다. 💾
• React가 빠른 이유: 컴포넌트 함수 전체를 다시 실행하더라도, React는 실제 DOM에서 변경된 부분만을 효율적으로 업데이트하기 때문에 높은 성능을 유지할 수 있습니다. ⚡
• setCount 호출 후 즉시 count 값을 로그로 확인하면, UI에 반영된 최신 값이 아닌 이전 값이 출력되는 현상을 통해 setCount가 비동기적으로 작동하며 현재 실행 컨텍스트의 상태를 즉시 변경하지 않음을 알 수 있습니다. 🕰️