forwardRef

forwardRef : 부모 컴포넌트에서 자녀 컴포넌트로 ref를 전달할 때 사용하는 기법

 

부모 컴포넌트가 자녀 컴포넌트의 DOM 요소에 접근할 때 사용할 수 있습니다. 

// App.js

import React, { useRef } from "react";

function App() {
  const inputRef = useRef();

  const focus = () => {
    inputRef.current.focus();
  };

  return (
    <div className="App">
      <input ref={inputRef} />
      <button onClick={focus}>포커스</button>
    </div>
  );
}

export default App;

위의 코드는 ref를 하나 생성하고, 만든 ref를 input 태그 안에 ref 속성으로 넣어주면 ref는 input의 돔 노드를 참조하게 됩니다.

그리고 버튼이 클릭될 때마다 focus 함수를 호출하게 됩니다. 

 

 

[references]

https://ko.react.dev/reference/react/forwardRef

forwardRef – React