Next.js dynamic import에서 ref가 작동하지 않는 이유와 해결법

Next.js에서 next/dynamic으로 컴포넌트를 동적으로 import할 때 ref가 예상대로 전달되지 않는 원인과 해결 방법, 그리고 Next.js에서 공식적으로 권장하는 방식까지 명확하게 정리합니다.

 

🔍 문제 요약: dynamic import 시 ref가 원하는 컴포넌트를 참조하지 않음

next/dynamic을 통해 컴포넌트를 동적으로 불러오면, ref가 실제 컴포넌트가 아닌 NoSSR 또는 LoadableComponent라는 컴포넌트로 전달되는 문제가 발생. 이 때문에 ref.current를 통해 실제 DOM에 접근하려는 경우 의도와 다르게 작동.

 

문제 재현 코드 예시

import React from 'react';
import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/Component'));

export default function Home() {
  const ref = React.useRef();

  React.useEffect(() => {
    console.log(ref.current); // ❌ 기대한 결과가 아님
  }, []);

  return <MyComponent ref={ref} />;
}

이 경우 ref.current는 실제 Component가 아니라 내부적으로 감싸진 LoadableComponent를 참조하게 됨.

 

✅ 기대 동작

ref는 동적으로 불러온 컴포넌트의 실제 DOM 노드나 인스턴스를 가리켜야 합니다. 이걸 가능하게 하려면, React의 forwardRef API를 이용해 중간 계층에서 ref를 명시적으로 전달해야 합니다.

 

🔧 해결 방법: forwardRef로 ref를 직접 연결하기

forwardRef를 사용하여 동적으로 불러온 컴포넌트에 ref를 명시적으로 전달하는 방식이 Next.js의 공식적인 권장 방법입니다.

📦 코드 예시

// pages/index.js
import React from 'react';
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/Component'));

const ForwardRefWrapper = React.forwardRef((props, ref) => (
  <DynamicComponent {...props} forwardedRef={ref} />
));

export default function Home() {
  const myRef = React.useRef();

  React.useEffect(() => {
    console.log('ref:', myRef.current); // ✅ 실제 컴포넌트 참조
  }, []);

  return <ForwardRefWrapper ref={myRef} />;
}

🏁 결론

Next.js에서 next/dynamic을 사용할 때 ref를 안전하게 전달하려면, 반드시 React의 forwardRef API를 활용한 명시적인 전달 방식을 사용해야 합니다.