24. 07. 04 TIL

리액트 라우터 돔 복습, 모달 만들기!

 

오늘은 리액트 라우터 복습 강의, 모달 만들기 강의를 듣고 라이브 코딩을 했다

 

좀 헷갈리긴 했는데 어쨌든 끝냈다!

 

일단 페이지 3개, 모달을 2개 만든다.

 

     <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/user" element={<UserPage />} />
        <Route path="/auth" element={<AuthPage />} />
        <Route path="/user/:id" element={<UserModal />} />
      </Routes>

리액트 라우터 돔을 설치하고, Routes에 Route를 만들어 저렇게 페이지를 연결해준다.

 

그리고 배웠던 게 페이지 모달, 스위치 모달이었는데

 

페이지 모달은 저렇게 페이지를 연결해서 불러오는 것이고, 스위치 모달은 원래 알던 방식으로 useState를 이용해 모달을 띄우는 방법이었다.

 

페이지 모달은 userModal로

   <div>UserPage</div>
      <button onClick={() => Navigate('/')}>home</button>
      <button
        onClick={() => {
          Navigate(`${data.id}`);
        }}
      >
        UserModal
      </button>
      <Outlet />

유저 페이지에서 이렇게 불러와서 쓴다.

 

여기서 outlet을 넣어주는데 사실 안 넣어도 잘 뜨긴 하는데...

 

outlet을 사용하면 중첩된 라우트 구조를 쉽게 관리하고 확장할 수 있다...

고 한다. 잘 모르겠으니 나중에 좀 더 정리를 해봐야할 것 같긴 하다.

const UserModal = () => {
  const { id } = useParams();
  const Navigate = useNavigate();
  return (
    <>
      <StBack />
      <StContent>
        <div>userId: {id}</div>
        <button onClick={() => Navigate(-1)}>닫기</button>
      </StContent>
    </>
  );
};

그리고 userMoal은 이렇게 해서 id를 띄워주고,

 

data는

 const data = {

    id: 234,

  };

userPage 상단에 이렇게 넣어줬다.

 

---

 

auth 페이지는 스위치 모달을 띄워야 하는데,

const AuthPage = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const Navigate = useNavigate();
  return (
    <>
      <div>AuthPage</div>
      <button onClick={() => Navigate('/')}>home</button>

      <button
        onClick={() => {
          setModalOpen(true);
        }}
      >
        AuthModal
      </button>
      {modalOpen && <AuthModal setModalOpen={setModalOpen} />}
    </>
  );
};

이렇게 useState로 관리해주면 된다.

기본은 false로, 모달 버튼을 클릭하면 true로 바꿔주면서 띄워주고

 

이 모달은 modalOpen이 true일 때만 뜨도록 해준다.

그리고 setModalOpen은 프롭스로 내려준다.

 

const AuthModal = ({ setModalOpen }) => {
  return (
    <>
      <StBack onClick={() => setModalOpen(false)} />
      <StContent>
        <div>login</div>
        <button onClick={() => setModalOpen(false)}>닫기</button>
      </StContent>
    </>
  );

그리고 authModal에서 setModalOpen을 받아서

닫기 버튼을 클릭하면 false로 바뀌도록 해준다.