React에서 하위 컴포넌트 메소드 호출하기: React.forwardRef와 useImperativeHandle 활용

리액트 컴포넌트는 상위 컴포넌트에서 넘겨준 props로 데이터를 받아 로직을 처리하는 형태가 대부분이다.

상위 컴포넌트의 매소드를 호출하려면 props로 넘겨받은 함수 변수를 실행해서 호출한다.

만약, 그 반대의 경우가 필요하다면?

즉, 상위 컴포넌트에서 하위 컴포넌트의 메소드를 호출하고자 할 때는 어떻게 할까?

React.forwardRef와 useImperativeHanlde을 이용하여 구현한다.

하위 컴포턴트

실행할 로직을 구현하고 ref를 노출한다.

const Input = React.forwardRef((props, ref) => {
     const somethingToDo = () => {
        console.log('Do Something'); 
    }

    useImperativeHandle(ref, () => {
      return {
            doIt : somethingToDo, 
      }
    });
      return (<div></div>)
});

상위 컴포넌트

하위 컴포넌트에 ref 속성을 정의해서 메소드를 호출한다.

const Main = () => {
  const myInputRef = useRef();

  const clickHandler ()=>{
        myInputRef.current.doIt();
  }

  return(
    <Input ref={myInputRef} onClick={clickHandler}></Input>
    );
}

주의점

refs(레퍼런스)는 필요한 경우에만 사용해야 한다. 즉, refs는 props로 표현할 수 없는 명령적인 동작에만 사용한다. 예를 들어 노드로 스크롤하기, 노드에 포커스 주기, 애니메이션 트리거, 텍스트 선택 등과 같은 동작에 대해서만 refs를 사용해야 한다.

참조 : https://react.dev/reference/react/useImperativeHandle