[React] forwardRef ??

리액트에서 부모 컴포넌트와 자식 컴포넌트가 존재할 때, 자식 컴포넌트에서 부모 컴포넌트의 내장 function을 사용 하고 싶다면 props를 통해서 사용하곤 했었다, 반대로 부모 컴포넌트에서 자식 컴포넌트의 내장 function을 사용하고 싶다면 어떻게 하면 될까?

 

1. forwardRef 사용

함수형 컴포넌트는 인스턴스가 존재하지 않기 때문에, ref를 사용할 수 없다. 따라서 함수형 컴포넌트에 forwardRef를 감싸 주어서 부모 컴포넌트에서 자식 컴포넌트의 DOM element에 접근할 수 있도록 한다.

 

여기서 궁금한게 생겼었는데 부모 컴포넌트에서 자식 컴포넌트에 접근을 하려면 자식 컴포넌트의 DOM element가 확정이 되고 ref 에 담긴 current 프로퍼티가 확정된 자식 컴포넌트의 DOM element를 바라봐야하는데 이 역할을 어떤 녀석이 하는지 개념이 없어서 공부해보니까 React의 Hook인 useRef가 있었다. useRef가 가상 DOM을 기반으로 작동하는 라이브러리인 React 에서 렌더링이 필요하지 않은 값을 참조할 수 있게 도와주는 역할을 한다.

 

 

 

코드로 보면 더 빠르게 이해 가능!

 

1. 부모 컴포넌트에서 useRef 선언 및 자식 컴포넌트에 보내기 !

import { useRef } from 'react'
import 자식컴포넌트 from './자식'

const 부모컴포넌트 = () => {
  const TestUseRef = useRef()
  
  return (
    <자식컴포넌트 ref={TestUseRef} />
  )
}

export default 부모컴포넌트;

 

2. 자식 컴포넌트에서 함수형 컴포넌트를 forwardRef로 감싸고 부모 컴포넌트에서 사용할 내장 함수들을 useImperativeHandle() 내부에 저장한다.

 

import { forwardRef, useImperativeHandle } from 'react'

const 자식컴포넌트 = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    useDebugger,
    useConsoleLog
  }))
  
  // ref function 1
  const useDebugger = () => {
  	debugger
  }

  // ref function 2
  const useConsoleLog = () => {
  	console.log(`useConsoleLog 실행 !`)
  }
}

export default 자식컴포넌트

 

 

3. 부모 컴포넌트에서는 ref 의 current 프로퍼티를 통해서 자식 컴포넌트에서 useImperativeHandle 에 감싸진 ref function 들을 사용할 수 있다.

import { useRef } from 'react'
import 자식컴포넌트 from './자식'

const 부모컴포넌트 = () => {
  const testRef = useRef()
  
  const 자식컴포넌트의 디버그 = () => {
  	useRef.current?.useDebugger // 자식 컴포넌트의 내장 ref function 인 useDebugger 실행.
  }
  
  return (
    <>
      <자식컴포넌트 ref={compRef} />
      <버튼컴포넌트 buttonLabel = '자식컴포넌트의 debuuger' onClick={자식컴포넌트의 디버그} Debugger/>
    </>
  )
}

export default 부모 컴포넌트;