[react] ForwardRef란?

주로 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달할때 사용한다.

여기서 ref란 언제 쓰이냐?
주로 텍스트 input에 focus 하는 것처럼 특정 DOM에 focus 되도록 해준다.

function App(){
  const inputRef=useRef();
  const focus=()=>{
    inputRef.current.focus();
  };
  
  return(
    <div>
      <input ref={inputRef}
      <button onClick={focus}>포커스</button>
    </div>
  )

그럼 이렇게 사진처럼 '포커스' 버튼을 누르면 해당 Input에 focus가 된다!

forwordRef는 부모에서 자식 컴포넌트로 전달할때 사용한다고 했으니..사용법은 완전히 간단하다!

ref가 작성되어있는(=자식 컴포넌트) 컴포넌트에 forwardRef로 감싸주기만 하면 끝!!

자식 컴포넌트

따로 MyPut이라는 컴포넌트를 만들어서 부모에 import 할 것이다.

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

export default forwardRef(MyPut); //요로코롬 !

부모 컴포넌트

<MyPut ref={inputRef}></Myput> 

이렇게 부모 컴포넌트에 작성하면 ref 전달 성공!