React 19 RC에서 변경된 ref 콜백 동작 대응하기

문제 상황

프로젝트에 React 19 RC를 적용해보던 중, ref 콜백에서 cleanup 함수를 반환하면 컴포넌트 언마운트 시 자동으로 호출된다는 변경사항을 확인했다. 기존에는 ref 콜백이 null을 받을 때 cleanup 로직을 직접 작성했는데, 이제 useEffect처럼 cleanup 함수를 반환하는 패턴으로 바뀌었다.

기존 코드

function VideoPlayer() {
  const handleRef = (node) => {
    if (node) {
      node.addEventListener('play', handlePlay);
    } else {
      // cleanup
    }
  };

  return <video ref={handleRef} />;
}

변경된 코드

function VideoPlayer() {
  const handleRef = (node) => {
    if (!node) return;
    
    node.addEventListener('play', handlePlay);
    
    return () => {
      node.removeEventListener('play', handlePlay);
    };
  };

  return <video ref={handleRef} />;
}

마이그레이션 포인트

1. ref 콜백에서 null 체크 후 early return
2. cleanup 로직을 반환 함수로 분리
3. 기존 null 체크 분기문 제거

React 19에서는 이 패턴이 더 직관적이고 useEffect와 일관성 있는 API를 제공한다. 다만 기존 코드가 많다면 점진적으로 마이그레이션하는 것이 안전하다. 프로젝트에서 약 15개 컴포넌트를 수정했고, 특히 intersection observer나 resize observer를 사용하는 부분에서 코드가 깔끔해졌다.