기본 CSS 내용을 따라한 후!
이와 같은 화면이 완성이 되었다!!
현재 작동 되는 것은
- 이상한 url로 갔을 때 뜨는 404 페이지
- 로그인 버튼을 누를시, /i/flow/login으로 리다이렉트 시켜줌
(더 상세한 내용을 원하면 강의 에 들어있다 😄)
Parallel Route
이번에 할 것은 패러렐 라우트!
우선, 이 페러렐 라우트가 왜 필요한지부터 알아보자.
x.com에 들어가본 후, url에 집중하며 로그인 버튼을 눌러본다.
!!!!
내가 지금까지 봤던 모달은 url이 바뀌지 않는 건데, 모달이 띄워졌다는 이유만으로 url이 바뀌어버린다.
오잉.....?
이러면 ..
/i/flow/login에 루트의 내용과 같은 컴포넌트를 또 설정해줘야 하는 건가..?
굳이 왜..?
그만한 메리트가 있나..?
일단!!
URL이 변하는 것은 제쳐두고,
여기서 알아야 할 것이 Parallel Route이다!
Parallel Route는, 모달과 페이지를 한꺼번에 띄울 수 있도록 해준다!
공식문서에서의 Parallel Route
Parallel Routing allows you to simultaneously or conditionally render one or more pages in the same layout. For highly dynamic sections of an app, such as dashboards and feeds on social sites, Parallel Routing can be used to implement complex routing patterns.
Parallel Routing을 사용하면 동일한 레이아웃에서 하나 이상의 페이지(여러 페이지)를 동시에 혹은 조건부로 렌더링을 할 수 있습니다.
소셜 사이트의 대시보드 및 피드와 같은 앱의 동적인 섹션의 경우 병렬 라우팅을 사용하여 복잡한 라우팅 패턴을 구현할 수 있습니다.
-> 우리가 구현하는 X를 기준으로 설명하느라 위의 예시를 들었지만, modal말고도 대시보드, 피드와 같은 한 페이지 내에서 렌더링 되는 것에 대해서도 사용할 수 있다!
-> 예를 들어 팀과 분석을 보여줘야 하는 경우, @team, @analytics를 폴더 이름으로 넣고 그 밑에 page.js로 화면을 짠 후 Layout의 props를 이용하여 렌더링 시켜주면 된다
이렇게 Layout에서 조건부 렌더링을 걸 수도 있고
에러와 로딩 또한 각각 처리할 수 있다 !
z.com
다시 돌아와서
그럼 우리는 모달을 만들 거니, @modal 폴더를 만들어준 후 page.tsx에 코드를 작성해주고 Layout에서 이 moal을 뿌려줘보장
*** 여기서 주의할 점
현재, 우리 폴더 구조이다.
page.tsx는 /app 바로 하위에 있고, @modal은 beforeLogin의 하위에 있어 서로 폴더가 다르다.
이럴 경우에는 parallel이 되지 못하기 때문에,
beforeLogin 안으로 이사 시켜준다.
그리곤 이제 layout에서 뿌려주기!
/(beforeLogin)/layout.tsx
import { ReactNode } from "react";
type Props = { children: ReactNode; modal: ReactNode };
export default function Layout({ children, modal }: Props) {
return (
<div>
{children}
{modal}
</div>
);
}
밑에 modal과 함께 뜨는 것을 볼 수 있당
Modal
Modal에도 옷을 입혀준당
i/flow/login으로 이사
현재 우리는 루트 페이지에 오면 이 화면을 볼 수 있다
하지만, 우리는 로그인 버튼을 눌렀을 때 -> /login -> /i/flow/login으로 리다이렉트 된 url에서 이 모달을 보여줘야 함!
따라서, 이사를 해보도록 하겠다
parallel 라우트는 서로 같은 폴더에서 가능하다했으니, @modal 하위에 /i/flow/login이라는 폴더 만들어주고, page.tsx를 거기로 이사시킨다.
Error!!!
-> 루트 페이지일 때 보여주는 화면도 page.tsx에 있고, /i/flow/login을 밖에 하나, @modal에 하나 이렇게 두 개 만들어주었다.
-> 그리고 루트 페이지로 이동해보니 !?!?
-> 분명 루트 페이지 지정해주는 page.tsx가 맨 밑에 있는데.... 왜 404..?
해결
우리가 Layout에서 요로코롬 작성을 해줬었는데, 현재 modal에는 루트 페이지가 없기 때문에 나는 404 오류였다
@modal에 루트 페이지를 강제로 넣어줘야 하는데..
빈 컨텐츠를 넣어줘야하니, next.js에서 제공해주는 default.tsx로 넣자!
(page.tsx로 해도 상관없다고 한다.)
export default function Default() {
return null;
}
짠!
완성본
/
/i/flow/login
어..... /i/flow/login의 뒷배경이 저거면 안 되는데..
다음화에 계속
