[React] useRef(), ref, forwardRef()

 

 

 

 

✔ useRef()

=> ref 객체를 생성하는 훅

const myRef = useRef();

=> myRef { current: null } 이런 식의 객체를 만들어 줌

=> .current로 직접 접근 가능

<input ref={myRef} />

=> myRef.current는 input DOM을 가리키게 됨

** DOM: 브라우저가 화면에 그리는 실제 HTML 요소

👉 즉 화면에 뿌려진 해당 input을 뜻함

myRef.current === input

 

ex) myRef.current.focus() 가능

 

 

✔ forwardRef()

=> 컴포넌트를 받아서 → ref를 처리해주는 새 컴포넌트를 반환

=> 자식 컴포넌트가 부모에게 받은 ref를 쓸 수 있게 해주는 HOC

** HOC란?

=> 고차 컴포넌트  (Higher-Order Component)

=> 컴포넌트를 인자로 받아서, 새로운 컴포넌트를 반환하는 함수

 

고차 컴포넌트 예시) 👇

// 원래 컴포넌트
const Hello = ({ name }) => <h1>Hello, {name}!</h1>;

// HOC
const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('렌더링 됨!');
    return <WrappedComponent {...props} />;
  };
};

// HOC로 감싼 새 컴포넌트
const HelloWithLog = withLogging(Hello);

// 사용 (부모 컴포넌트 역할)
const App = () => {
  return <HelloWithLog name="React" />;
};

 

👩🏻 ** 정리

 

- withLogging: 원래 있던 컴포넌트에 props 연결을 위해 감싸주는 역할

- WrapperComponent: 원래 있던 컴포넌트

- HelloWithLog: 새 컴포넌트

 

 

 

 

forwardRef() 예시 👇

const MyComponent = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

=> 일반 컴포넌트는 ref를 props처럼 못 받기 때문에 가능하게 하기 위래 컴포넌트를 감싸주는 역할을 forwardRef()가 하게 되며, HOC(고차 컴포넌트) 형태로 만든 것

 

 

 

- 부모 -> 자식 컴포넌트에서 ref 쓰는 예시)

✅ 부모 컴포넌트

const Parent = () => {
  const inputRef = useRef(); // 🔹 ref 객체 생성

  const focusInput = () => {
    inputRef.current.focus(); // 🔸 연결된 DOM에 직접 접근
  };

  return (
    <>
      <ChildInput ref={inputRef} /> {/* 🔸 ref 전달 */}
      <button onClick={focusInput}>Focus the input</button>
    </>
  );
};

 

✅ 자식 컴포넌트

const ChildInput = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

 

 

 

📚 결론 📚

useRef()로 ref 객체 만든다 → ref={...}로 자식에게 전달한다 → forwardRef()로 받은 자식이 내부에서 쓴다