[React] 함수형 컴포넌트에 매서드 추가해서 사용하기

먼저 App.jsx 파일에 코드가 작성된 App 컴포넌트가 있습니다.

import { useRef } from 'react'
import './App.css'
import MyComponent from './MyComponent'

function App() {
  const refComponent = useRef()
  
  return (
    <>
      <MyComponent ref={refComponent} />
      <button onClick={ () => { refComponent.current.setName("Dip2K") } }>set Name</button>
      <button onClick={ () => { refComponent.current.setAge(100) } }>set Age</button>
      <button onClick={ () => { 
        alert(`Name: ${refComponent.current.getName()}, Age: ${refComponent.current.getAge()}`) 
      } }>get Info</button>
    </>
  )
}

export default App

실행 결과에 대한 화면은 다음과 같구요.

화면에서 App 컴포넌트의 코드에서 보이는 MyComponent는 Name과 Age를 입력받는 부분입니다. 그 외 3개의 버튼을 보면 MyComponent의 매서드를 호출하고 있습니다. 리엑트에서 컴포넌트의 매서드를 호출한다라는 것은 리엑트 계에서는 매우 어색한 경우이며 피해야 하는 경우라고 합니다.

MyComponent에 대한 코드는 다음과 같습니다.

import { forwardRef, useImperativeHandle, useRef } from "react";

function MyComponent(props, ref) {
  const refNameInput = useRef()
  const refAgeInput = useRef()

  useImperativeHandle(ref, () => ({
    getName: () => { return refNameInput.current.value },
    setName: (v) => { refNameInput.current.value = v },
    getAge: () => { return refAgeInput.current.value },
    setAge: (v) => { refAgeInput.current.value = v },
  }))

  return (
    <div>
      <p><span>Name </span><input ref={refNameInput} /></p>
      <p><span>Age </span><input ref={refAgeInput} /></p>
    </div>
  )
}

export default forwardRef(MyComponent)

리엑트에서 함수형 컴포넌트에 매서드를 추가하기 위해서는 forwardRef라는 고차함수와 useImperativeHandle라는 훅을 동시에 사용해야 하며 useImperativeHandle을 통해 매서드를 정의해줍니다.