Contextapi 함수형, 상태값과 변수전달

//app.js

[...]
import PageContextProvider from "./component/provider/pagecontextprovider";

function App() {
  return (
    <PageContextProvider>
        <div className="App relative">
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Main} />
              <Route exact path="/membership" component={Membership} />
[...]

//provider폴더의 pagecontextprovider.js
import React,{useState, useEffect, createContext} from 'react'
export const PageContext = createContext();
const PageContextProvider = (props) => {
  const [user, setUser] = useState({
    'name':'harrypotter',
  });
  const array2 = [1,2,3,4];
  const [number, setNumber] = useState(33)
  const onIncrease = ()=>{
    setNumber(number+1)
  }

  return (
      <PageContext.Provider value={{
        user:user,
        array2,
        number:number,
        onIncrease
      }}>{props.children}
      </PageContext.Provider>
  );
}

export default PageContextProvider;

//하위 컴퍼넌트에 출력 

 

//app.js 하위컴퍼넌트에 출력
[...]
  const {user} = useContext(PageContext);
  const {array2} = useContext(PageContext);
  const {number} = useContext(PageContext);
  const {onIncrease} = useContext(PageContext);
  return (
    <div id="morning">
      {user.name}
      {array2}
      {number}
      <button onClick = {onIncrease}>age+1</button>
      <div className="morning_tit border-b-2">
 [...]