React에서 다른 Function Component에 있는 함수 호출: React Calling Function From Another Function Component

WeeklyBox에서 AfterBoxList에 있는 함수를 호출하는 방법은 없을까 찾아보다가

useImperativeHandle이라는 리액트 훅을 통해 가능한 방법을 찾았다.

Home의 자식은 WeeklyBoxList, AfterBoxList이고,

이중 WeeklyBoxList의 자식은 WeeklyBox이다.

요약하자면 다음과 같다.

Home.js

import React, {useRef} from "react";
import AfterBoxList from "../../components/Home/AfterBoxList";
import WeeklyBoxList from "../../components/Home/WeeklyBoxList";
import "./Home.css";

function Home() {
    const childRef = useRef(null);

    const refreshAfterBoxList = () => {
        childRef.current.getAfterBoxList();
    }

    return <div className = "home-layout">
            <div className = "home-layout__wrap">
                <div className = "home-layout__wrap__left">
                    <WeeklyBoxList 
                        refreshAfterBoxList = {refreshAfterBoxList}
                        />
                    <AfterBoxList 
                        ref = {childRef}
                        />
                </div>
            </div>
        </div>;
}

export default Home;

AfterBoxList.js

import React, { useImperativeHandle, useState, useEffect, forwardRef } from "react";
import axios from "axios";
import AfterBox from "./AfterBox";
import "./AfterBoxList.css";

export const AfterContext = React.createContext();

function AfterBoxList({accessToken, userId}, ref) {
   
   // 첫번째 방법
    useImperativeHandle(ref, () => ({
        getAfterBoxList
      }));

	// 두번째 방법
    // useImperativeHandle(ref, () => ({
    //     refreshAfterList: () => {
    //         getAfterBoxList();
    //     }
    //   }));

    async function getAfterBoxList() {
        // ...
    };

    return <div></div>;
}
export default forwardRef(AfterBoxList);

WeeklyBox.js

import React from "react";
import "./WeeklyBox.css";

function WeeklyBox({refreshAfterBoxList}) {
  
    const onClickCompleteBtn = () => {
        refreshAfterBoxList();
    }

    return <div className="weeklyBox">
    	...
	</div>;
}

export default WeeklyBox;

WeeklyBoxList에서는 Home에서 받은 함수를 그대로 자식인 WeeklyBox에 넘겨주었다.