리액트 자녀 컴포넌트 함수 사용하기

작업을 하다가 보니 자녀컴포넌트에서 생성한 함수를 부모컴포넌트에서 사용해야 할 일이 생겼었다. (엘리먼트 위치이동관련 함수)

부모컴포넌트의 함수를 자식한테 넘겨 사용해본적은 많으나 그 반대의 상황이라 검색을 해보았고 react hooks "useImperativeHandle"를 사용해 간단히 해결해 사용법을 공유해보고자 한다.

부모 컴포넌트

const parentsRef = useRef<any>(null);

const childFnClick = () => {
	// 자식컴포넌트에서 만들어진 함수
	if (parentsRef.current) parentsRef.current.onToggleDetail('down');
    or
    parentsRef?.current.onToggleDetail('down');
}

return (
	<Layer
    	parentsRef={parentsRef}
    />
    <button onClick={childFnClick}>자식함수 실행!</button>
)

1. 부모 컴포넌트에서 ref 생성후 자식컴포넌트에 넘겨줍니다

자식 컴포넌트

import React,{useImperativeHandle} from 'react';

const Layer = (props) => {
	const {parentsRef} = props;
    const onToggleDetail = () => {
    	...함수로직...
    }
	useImperativeHandle(parentsRef, () => ({
    	onToggleDetail
  	}))
}

2. 부모 컴포넌트에서 받은 ref를 useImperativeHandle( 받은 ref, () => ({
   부모한테 보낼 함수명 작성 (객체형태로 보내기 때문에 함수명만 작성한다)
   }) )
   (원래 사용법은 forwardRef를 사용해서 ref를 넘겨주라 했는데 직관적으로 ref를 표현하기 위해 사용하지 않았다)

3. 이렇게 둘사이를 연결해주고 부모컴포넌트에서 childFnClick 함수 내용처럼 사용을 해주면 된다.
   (참고로 매개변수가 들어가는 함수면 담아서 함수를 실행해 주면 된다.)

처음으로 자식 컴포넌트의 함수를 실행해 보았는데 이런경우가 생길줄 몰랐는데
앞으로도 작업하다보면 생각치 못한일이 벌어질것이다. 그런데 언제나 해결법은 존재한다😱