[React] 리액트 - 부모에서 자식 컴포넌트의 함수 호출하기
안녕하세요. 휴먼스케이프 Hugh 입니다.
오늘은 평소에 피처 개발을 하면서 잘 사용하지 않았던 React에서 제공해주는 기능을 최근에 사용하게 되어 다시 짚고 넘어가면서 공부를 해보려고 합니다.
부모 컴포넌트에서 자식 컴포넌트의 함수를 호출해야할 상황이 생겼습니다. 자주 발생할 수 있는 상황이고 해결방법 또한 많을 것 같다는 느낌도 들었습니다. 평소 같으면 자식 컴포넌트의 함수를 부모 컴포넌트로 이사하여 간단하게 구현을 했을텐데요.
하지만 이미 해당 자식 컴포넌트는 여러 곳에서 사용 되고 있었기 때문에 위 언급한 방법으로 구현하게 될 경우, 해당 기능 개발과 관련이 없는 부분의 코드까지 살펴보아야 하므로 좋은 방법은 아니었습니다.
위 사항을 우려하지 않아도 되는 또 다른 방법으로는 부모에서 넘겨주는 props를 하나 추가하여 자식에서 선언된 함수를 해당 props가 참조하게 해주는 것 이었죠. 예를 들면 아래와 같습니다.
// 부모 컴포넌트
const sampleRef = useRef({});...
return (
<ChildComponent sampleRef={sampleRef} ...
)// 자식 컴포넌트...const parentsLikesThisFunc = () => {
console.log('hello');
}sampleRef.current.parentsLikesThisFunc = parentsLikesThisFunc;
좋은 방법인지는 모르겠지만 위 방법으로도 비교적 심플하게 해결은 가능합니다. 하지만 뭔가 편법 같다는 생각은 드는군요.
그래서 검색을 해보니 역시 이 상황을 위해서 React 함수와 Hooks가 있었습니다.(페어로 작업중이던 Aiden께서 금방 찾아주심 — 참고자료)
forwardRef 와 useImperativeHandle 를 활용하여 부모에서 자식 컴포넌트의 함수 호출하기
이 방법 또한 매우 간단합니다. 위 방법과 다르게 부모 컴포넌트에서 props를 넘겨주는 대신 자식 컴포넌트의 DOM에 접근할 수 있는 ref 를 얻습니다. 그리고 자식 컴포넌트를 forwardRef로 감쌉니다. 그러면 인자로 props와 ref를 받을 수 있습니다. useImperativeHandle를 이용하여 부모에게 노출될 인스턴스의 값을 사용자 정의할 수 있습니다. 첫 번째 인자에는 ref, 두 번째 인자에는 ref를 활용하여 접근할 함수를 넘겨줍니다.
// 부모 컴포넌트
const sampleRef = useRef({});return (
<ChildComponent ref={sampleRef} ...
)// 자식 컴포넌트const ChildComponent = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
// 부모에서 사용하고 싶었던 함수
parentsLikesThisFunc,
}));...});
위와 같이 간단하게 부모에서 자식 컴포넌트의 함수를 호출하는 방법을 알아보았습니다.
감사합니다.
Walk with us!
기술이 세상을 더 아름답게 할 수 있다고 믿으신다면, 휴먼스케이프와 함께 소중한 뜻을 펼칠 수 있습니다.
함께 걸어가며 성장하실 분, 언제든지 연락해주세요 :)
