ForwardRef

- forwardReffks

ref 전달은 컴포넌트를 통해 자식 중 하나에 ref를 자동으로 전달하는 기법

재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에서는 유용

function parent() {

    return (
        <div>
            <Children />
        </div>
    )
}

function Children() {
 const hnadleFunc = () =>{
  console.log("hello world")
 }
    return (
        <buntton>
            호로롱
        </buntton>
    )
}

여기서 자식의 button에 접근할 수 있는 방법

우린 흔히 ref를 생각함

이 ref를 부모에서 자식으로 props로 넘겨주는 방법이 forwardref임

사용

function parent() {
 const childRef = useRef
    return (
        <div>
            <Children ref={childRef} />
        </div>
    )
}
const Children = React.forwardRef((props,ref)=>{
const hnadleFunc = () =>{
  console.log("hello world")
 }
    return (
        <buntton ref={ref}>
            호로롱
        </buntton>
    )
})

작동

1. 부모에서 ref생성
2. 자식으로 전달
3. 자식 컴퍼넌트는 React.forwardRef() 안에서 작성
4. 자식의 첫번째 파라미터는 props 두번째는 ref를 받음
5. 전달받은 ref를 자식컴퍼넌트 안 태그에 연결

심화

forwardRef를 사용하여 부포 컴퍼넌트에서 자식 컴퍼넌트 안 함수 작동하기

useImperativeHandle 와 forwardRef 사용

function parent() {
 const childRef = useRef
    return (
        <div>
            <Children ref={childRef} />
        <button onClick ={()=>{ref.current.handleFunc()}}
        </div>
    )
}
const Children = React.forwardRef((props,ref)=>{

  useImperativeHandle(ref, () => ({
      hnadleFunc() {
  console.log("hello world")
      },
    }));
    return (
        <buntton ref={ref}>
            호로롱
        </buntton>
    )
})

1. 위 와 같은 방법으로 진행
2. 단 부모에서 사용할 함수를 useImperativeHandle()함수 안에서 선언
3. useImperativeHandle의 첫번째 파라미터는 ref를 넣어주고 두번째는 콜백함수
4. 두번째 파라미터 함수 안에서 부모에서 실행시킬 함수 선언
5. 부모에서 함수 작동