컴포넌트 동시에 띄우기

Url Modal

• url을 변경하면서 modal을 띄우는 동시에 이전 화면을 뒷 배경으로 보여주려고 하였다. 다음과 같은 블로그를 참고했다.

• 리액트 라우터 v6를 이용해 쉽게 모달 만들기

• useLocation

• [React - 17] useLocation

• 모달 띄우기

• Create contextual modal navigation with React Router V6.

1. background가 존재하지 않을 때 (즉, location만 사용될 때):

이 상황은 사용자가 웹사이트를 처음 방문하거나, 특정 URL(예: /modal)로 직접 접근했을 때 발생한다. 이 경우 background는 null 또는 undefined이고, location이 현재 위치를 나타내므로, location={background || location}는 단순히 location={location}과 동일하게 동작한다.

예시:

• 사용자가 /로 접근할 때:
  • location.pathname은 /이다.
  • Routes는 이 경로에 매칭되는 <Route>를 찾고, path="/"를 가진 Main 컴포넌트를 렌더링한다.
  • 이때, Modal 컴포넌트는 렌더링되지 않는다(경로가 /modal이 아니기 때문에).
• 사용자가 /modal로 직접 접근할 때:
  • location.pathname은 /modal이다.
  • Routes는 이 경로에 매칭되는 <Route>를 찾는다. / 경로에 있는 Main 컴포넌트가 먼저 렌더링되고, Outlet을 통해 modal 경로에 있는 Modal 컴포넌트가 렌더링된다.
  • 이 경우, Main 컴포넌트가 유지되면서 Modal 컴포넌트가 그 위에 중첩되어 렌더링된다.

2. background가 존재할 때 (즉, 모달이 열려 있을 때):

이 상황은 사용자가 모달을 열기 위해 특정 버튼을 클릭했을 때 발생한다. 이 경우 background에는 모달을 열기 전에 사용자가 있던 위치 정보가 저장되어 있다. React Router는 이 background를 이용해 현재 위치를 모달이 열리기 전의 상태로 간주하게 된다.

예시:

• 사용자가 /에서 모달을 열려고 할 때:

  • 사용자가 / 페이지에서 "Open Modal" 링크를 클릭하면, Link 컴포넌트의 state={{ background: location }} 덕분에 현재 위치(/)가 background에 저장된다.
  • 이때 URL은 /modal로 바뀐다.
  • location={background || location}에 의해, 첫 번째 <Routes>는 background (즉, /)을 위치로 인식하게 된다.
  • 따라서 Routes는 / 경로와 매칭되는 Main 컴포넌트를 렌더링한다. 즉, 모달이 열려 있어도 배경으로 / 페이지가 유지된다.
  • 그러나 URL이 /modal로 설정되어 있기 때문에, background가 존재할 경우 두 번째 <Routes>가 활성화되어 모달이 페이지 위에 오버레이되어 렌더링된다.

• 모달을 열 때의 동작:

  • 첫 번째 <Routes>는 여전히 이전 위치인 /를 기준으로 라우팅을 처리하므로, 페이지는 계속해서 Main컴포넌트를 렌더링한다.
  • 동시에 두 번째 <Routes>가 실행되며, 오직 modal 경로만을 기준으로 모달을 렌더링한다.
  • 따라서 사용자는 모달이 열려 있는 동안에도 기존 페이지(홈페이지)를 볼 수 있다.

• 우리 앱은 /auth-modal로 직접 전달했을 때에는 뒤에 따른 배경을 보여줄 필요가 없다. 오직 어떤 페이지에서 모달을 열었을 때(background가 존재할 때)만 뒷 배경을 보여주면 된다.

• 따라서 예제의 코드를 빌려 표시하면 다음과 같이 router가 설정되면 된다.

import "./App.css";
import { Route, Routes, useLocation } from "react-router-dom";
import { Main } from "./components/Main";
import { Modal } from "./components/Modal";
function App() {
  const location = useLocation();
  const background = location.state && location.state.background;

  return (
    <div className="App">
      <Routes location={background || location}>
        <Route path="/" element={<Main />} />
        <Route path="modal" element={<Modal />} />
      </Routes>
      {background && (
        <Routes>
          <Route path="modal" element={<Modal />} />
        </Routes>
      )}
    </div>
  );
}

export default App;

1. 백그라운드가 존재하지 않을 때:
   1. 사용자가 /로 접근할 때: Main 컴포넌트를 보여준다.
   2. 샤용자가 /modal 로 접근할 때: Modal 컴포넌트를 보여준다.
2. 백그라운드가 존재할 때(사용자가 어떤 페이지에서 모달을 열었을 때):
   1. 사용자가 /에서 모달을 열려고 할 때: 첫 번째 Routes에서 location이 background가 되므로 background를 보여준다. background가 있으므로 두 번째 Routes 가 활성화되고 여기서는 location이 현재 location(/modal)이므로 modal도 렌더링 된다.

createBrowserRouter 이슈

• 하지만 createBrowserRouter에서 동적으로 location을 넘길 수 있는 방법이 없는 것 같았다. 일단 routes와 route를 써서 해결해야 할 것 같다.