<div id="readability-page-1" class="page"><div id="main" role="main">
  
  



  <article class="page" itemscope="" itemtype="https://schema.org/CreativeWork">
    <meta itemprop="headline" content="React ref는 언제 붙는가? 그리고 Ref callback은 언제 실행되는가?">
    <meta itemprop="description" content="React의 ref에서 버그를 내어 정리해 보았다.">
    <meta itemprop="datePublished" content="2025-08-13T15:49:30+00:00">
    

    <div>
      
        <header>
          
          

  <p>
    

    

    
      
      

      <span>
        
        
          less than 1 minute read
        
      </span>
    
  </p>


        </header>
      

      <section itemprop="text">
        
        <p>React의 ref에서 버그를 내어 정리해 보았다.</p>

<h2 id="1줄-요약">1줄 요약</h2>

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

<p>이 순서가 중요한 이유는</p>
<div><pre><code>-	렌더 중엔 ref가 비어 있음(null)
-	ref는 커밋에서 채워짐: ref를 쓰는 초기화 코드는 커밋 이후로 미뤄야 함
</code></pre></div>

<hr>

<h2 id="react-렌더링-과정-정리">React 렌더링 과정 정리</h2>

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

<p>20250814</p>

        
      </section>

      

      


      
  


    </div>

    
      
        

      
    
  </article>

  
  
    


  
  
</div></div>

Never test

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

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

댓글