useImperativeHandle(ref, CB)

• 자식컴포넌트의 메서드 호출할 수 있도록 한다.
• forwardRef() 와 함께 사용한다.

forwardRef()

• 부모 컴포넌트에서 입력한 ref객체를 직접 처리하기 위해 forwardRef() 호출

예제코드

Child-Component

import React, {useState, useImperativeHandle, forwardRef } from 'react'

// props와 ref를 인자로 받음
function ChildCompo(props,ref){
  const [name, setName]=useState('');
  const [age, setAge]=useState(0);
  
  // 1번인자 : ref
  // 2번인자 : 현재 컴포의 값을 부모컴포가 접근할수 있는 CB함수를 전달
  useImperativeHandle(ref, () => ({
    addAge : value => setAge(age + value),
    getNameLength : ()=> name.length,
  }))
  
  return (
    <div>
      <p>{`name is ${name}`}></p>
      <p>{`age is ${age}`}></p>
      // ...
    </div>
  )
}
// 여기서 forwardRef를 씌워줌으로 ref 매개변수를 사용할수 있게됨
// 부모컴포넌트에서 useRef()를 사용하고 자식의 useImprerativeHandle에 전달한 객체를 사용해 값 수정 가능
export default forwardRef(ChildCompo)

Parent-Component

function ParentCompo () {
  const childCompoRef = useRef();
  const onClick = () => {
    if (childCompoRef.current) {
      console.log('current name length:', childCompoRef.current.getNameLength();)
      childCompoRef.current.addAge(5);
    }
  }
  return (
    <div>
      <Profile ref={profileRef} />
      <button onClick={onClick}>add age 5</button>
    </div>
  )
}

리액트 공식문서 - useImperativeHandle
책 : 실전 리액트 프로그래밍/이재승 저