useContext

import React, { createContext, useContext } from "react";

const ModalRoot = ({ children }) => {
  const [open, setOpen] = useState(false);
  return (
    <ModalContext.Provider
      value={{
        open,
        setOpen,
      }}
    >
      {children}
    </ModalContext.Provider>
  );
};

provider로 넘겨주면 모든 자식 컴포넌트에서 넘겨받은 값을 사용할 수 있음