롤 mbti#7: 페이지 전환 기능을 구현하자

페이지를 전환하는 방법에는 여러가지가 있겠지만, 간편하게 context를 이용해서 페이지 전환 기능을 구현했다.

src/contexts/page.js

import { createContext } from "react";

const PageContext = createContext({
  status: "start",
  action: () => {},
});

export default PageContext;

src/App.jsx

...
  const [page, setPage] = useState("ready");
  return (
    <PageContext.Provider value={{ status: page, action: onClick }}>
      <Reset />
      <StyledDiv className="App">
        <Template />
      </StyledDiv>
    </PageContext.Provider>
  );

과 같은 느낌으로, onClick에는 적당한 페이지 넘김 함수를 넣어주었다. 각 페이지 별로, 넘기게 되면 onClick으로 setPage를 이용해 page를 바꿔주는 느낌으로 구현했다.