목록2025/03/11 (1)
juni
React의 라이프사이클과 가상 DOM 관점에서 Hook과 메모이제이션 동작
1. 리액트의 렌더링 프로세스와 가상 DOMconst ChatRoom = () => { const [messages, setMessages] = useState([]); // 1. 렌더 단계 (Render Phase) console.log("컴포넌트 렌더링 시작"); // 2. 커밋 단계 (Commit Phase) useEffect(() => { console.log("실제 DOM 업데이트 후 실행"); }); return {/* JSX */};};랜더링 과정랜더 단계: 가상 DOM 트리 생성재조정: 이전 가상 DOM과 비교커밋 단계: 실제 DOM 업데이트2. 각 Hook/메모이제이션의 동작 시점const ChatRoom = ({ roomId }) => { console.log..
CS
2025. 3. 11. 16:27