React ref는 언제 붙는가? 그리고 Ref callback은 언제 실행되는가?

React의 ref에서 버그를 내어 정리해 보았다.

1줄 요약

렌더(컴포넌트 함수 본문 실행) -> 커밋(ref 세팅 -> useLayoutEffect) -> 브라우저 페인트(이건 브라우저에 위임) -> useEffect

이 순서가 중요한 이유는

-	렌더 중엔 ref가 비어 있음(null)
-	ref는 커밋에서 채워짐: ref를 쓰는 초기화 코드는 커밋 이후로 미뤄야 함

---

React 렌더링 과정 정리

1. Render Phase (계산만 하는 단계)
   • 컴포넌트 함수를 실행 -> 가상 트리 계산만 한다. 브라우저 DOM과는 무관
   • 이 시점엔 실제 DOM이 없다. 따라서 ref.current는 null
   • 렌더 함수(컴포넌트 본문)에서 DOM에 의존하는 일(style 측정, 포커스, 이벤트 직접 등록 등)은 금지
2. Commit Phase (실제 DOM을 바꾸는 단계)
   • React가 가상 트리 결과를 실제 화면에 반영한다.
   • commit에서는 아래 순서대로 react가 일을 한다
   1. DOM 변화 적용: 새 노드 생성/속성 변경/삭제 등 실제 DOM 업데이트
   2. ref 연결/해제
      • object ref: ref.current = domNode로 채워짐
      • callback ref: refCallback(domNode)가 호출됨 (언마운트 되면 refCallback에는 파라미터가 모두 null로 들어간다)
   3. useLayoutEffect 실행 (페인트 직전에 동기적 실행)
      • ref가 이미 붙은 상태에서 동기적으로 실행
      • 따라서 DOM style 측정, 스크롤/포커스 조정, 동기 이벤트 등록 같은 화면 그리기 전에 맞춰야 할 작업에 적합
3. 브라우저 페인트: 화면이 브라우저에 실제로 그려짐
4. useEffect 실행 (비동기적 실행): 네트워크 호출, 로깅, 비동기 작업처럼 화면과 타이밍이 덜 민감한 작업에 적합

20250814