[260315] TIL

Today I Learned (2026-03-15)

복습: 메모이제이션 제대로 쓰기

참고 링크

• 유튜브

Render/Commit Phase와 브라우저 렌더링

• 브라우저 파이프라인: DOM/CSSOM -> Render Tree -> Layout -> Paint -> Composite
• React Render Phase: 무엇을 바꿀지 계산(가상 DOM 비교)
• React Commit Phase: 실제 DOM 반영(appendChild, setAttribute 등)
• useLayoutEffect는 커밋 직후(페인트 전), useEffect는 페인트 후 실행

메모이제이션 훅 동작 관점

API	작동 시점	하는 일	목적
React.memo	Render Phase 초입	props가 같으면 컴포넌트 렌더링 자체를 건너뜀	불필요한 리렌더링/커밋 방지
useMemo	Render Phase 내부	의존성이 같으면 계산값 재사용	무거운 계산 비용 절감
useCallback	Render Phase 내부	의존성이 같으면 함수 참조 재사용	자식에 전달하는 함수 props의 참조 동일성 유지

정리

• 부모 리렌더링 시 함수 props가 매번 새로 생성되면 자식도 쉽게 리렌더링된다.
• useCallback은 함수 참조 안정화에 효과적이고, React.memo와 함께 써야 체감이 크다.
• 객체/배열 props는 useMemo로 참조를 안정화해야 얕은 비교 최적화가 잘 동작한다.
• React.memo, useMemo, useCallback은 무조건 적용보다 병목이 있는 지점에 맞춰 선택적으로 쓰는 게 좋다.