🚤 성장일지 7.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

⚛ (7.0)<완전 개편> 파인만 학습법을 알게 된만큼, 성장일지는 정말 그 날의 키워드 중심으로 간단하게 정리하도록 한다.

Next.js의 Parallel Routes

Next.js의 Route 관련 공식문서를 보다가 재미있는 기능을 발견했다. 바로 Parallel Routes이다. 말 그대로 평행으로(병렬로) 라우팅을 할 수 있는 기능이다. layout.tsx 컴포넌트를 기준으로 해당 파일이 위치한 곳에서 폴더명 앞에 @를 붙이면 해당 폴더의 이름에 해당하는 컴포넌트는 layout.tsx 컴포넌트의 props로 가져올 수 있다. 말로 하면 되게 복잡해보이는데 아래 예시를 보면 이해가 쉽다.

export default function Layout({ children, aa, bb }: Props) {
  return (
    <>
      <h1>Layout</h1>
      {children} // 기본적으로 layout.tsx가 위치한 계층의 page.tsx 컴포넌트가 렌더링된다.
      {aa} // @aa 폴더의 page.tsx 컴포넌트가 렌더링된다.
      {bb} // 마찬가지
    </div>
  );
}

이 때 또 중요한 게 있다. 바로 default.tsx인데, 이 파일의 역할은 위와 같이 동일한 위치에서 다른 컴포넌트는 그 내부에 경로가 있는데 다른 컴포넌트는 없는 경우에 기본적으로 렌더링할 컴포넌트를 정의하는 것이다. 예를 들어, @aa 폴더에 page.tsx가 있고 @bb 폴더에는 page.tsx가 없는 경우에 @bb 폴더의 page.tsx가 없는 경우에 @bb 폴더의 default.tsx가 렌더링된다.

사실 이 부분은 말로 설명이 어려워서 아래 참고에 공식문서를 읽어보는 걸 추천한다!

그리고 이제 정말 재미있었던 부분..!(사실 처음에 이해하는데 머리가 아팠음...)

공식문서에서는 위의 기능을 통해서 Modal(모달)을 구현할 수 있다고 한다!!!(참고)

안그래도 Next.js에서도 React와 비슷하게 Portal을 써야하나 했는데, 이렇게 쉽게 구현이 가능하다니! 라는 마음으로 구현해보았다.(구현하면서 이해하느라 머리가 아팠따...) 결론부터 내가 구현한 방법의 구조 예시를 보면 아래와 같다.

└─ src
   └─ app
      ├─ example
      │  ├─ @exampleModal
      │  │  └─ filter
      │  │     └─ page.tsx
      │  └─ default.tsx, layout.tsx, page.tsx
      ├─ @homeModal
      │  ├─ filter
      │  │  └─ page.tsx
      │  └─ default.tsx
      └─ default.tsx, layout.tsx, page.tsx

위와 같은 구조가 된다. 이렇게 되면 home에서는 '/'로 접근 시에 home 컴포넌트가 렌더링 되면서 @homeModal에 해당하는 default가 렌더링된다.(modal이 보이면 안되니까 null을 반환하게 처리한다.) 그리고 반대로 '/filter'로 접근할 때는 @homeModal에 있는 filter에 있는 page.tsx가 렌더링된다. 이 때, 모달의 기능을 해야하므로(즉, 기존 home 컴포넌트는 렌더링 되어야하기 때문에) home의 default.tsx에는 home의 page.tsx를 반환하게 하면 된다. 그러면 home 컴포넌트는 렌더링되고, @homeModal의 filter에 있는 page.tsx가 렌더링되면서 모달이 렌더링된다. 처음엔 이 부분 자체가 이해가 잘 안돼서 많이 헤맸는데 한 번 이해하면 나름..? 직관적이고 좋은 방법이라고 생각한다. 그리고 또 이렇게 구현해보고 싶었던 이유 중 하나는 모달임에도 불구하고 뒤로가기가 적용되었으면 했기 때문이다! 위와 같이 모달 자체가 라우팅으로 구현된 것이기 때문에, 모달창이 떴을 때 뒤로가기를 하면 모달이 사라진 화면이 렌더링되게 할 수 있다.

좀더 자세한 내용은 꼭 공식문서를 보는 걸 추천한다!

📝 회고

이해하는데 시간이 좀 걸렸지만 새로운 재미를 발견한 하루였다. 나중에 시간이 될 때, Next의 내부 구현 코드도 한번 봐야지!!!

참고

• Next.js 공식문서: Parallel

undefined