자식 컴포넌트 각각의 상태와 한 버튼에대한 실행 함수가 다를때, 자식에서 버튼에 대한 실행 함수를 정의하여 실행되는 로직을 다르게 가지고갈 수 있다.
1.
부모 컴포넌트에 useRef를 정의한다. 자식 컴포넌트에서 실행할 함수 타입을 정의한다. 그리고 자식 컴포넌트에 ref 속성에 매핑한다.
(자식 컴포넌트에서 실행할 함수를 정의해야하기 때문에 자식 컴포넌트에서 실행할 함수 이름을 같게 하는것이 좋다)
2.
자식 컴포넌트에서는 forwardRef를 통해 컴포넌트를 감싸서 부모가 ref를 전달 할 수 있도록 한다.
3.
useImperativeHandle 훅을 이용하여 전달받은 ref를 매개변수로 전달하고 사용할 함수를 다음 매개변수에서 콜백으로 정의한다.
Parent.tsx
import React, { useRef } from "react";
import Child from "./Child";
const Parent = () => {
const childRef = useRef();
const handleClick = () => {
childRef.current.setText(); // 자식 컴포넌트의 함수 호출
};
return (
<div>
<button onClick={handleClick}>자식 컴포넌트 함수 호출 버튼</button>
<Child ref={childRef} />
</div>
);
};
export default Parent;
JavaScript
복사
Child.tsx
import React, { forwardRef, useImperativeHandle, useState } from "react";
const Child = forwardRef((props, ref) => {
const [text, setText] = useState("");
useImperativeHandle(ref, () => ({
setText: () => {
setText("test"); // 상태 업데이트
},
}));
return <input type="text" value={text} readOnly />;
});
export default Child;
JavaScript
복사