Next 2

[Next.js] Parallel Routes를 활용한 모달 상태 관리 하기 - URL 기반상태관리 / useSearchParams 와 Suspense 같이 사용하기

서론모달(Modal)은 사용자에게 중요한 정보를 표시하거나 작업을 완료하도록 유도하는 UI 요소로 널리 사용된다.하지만 모달의 상태 관리는 생각보다 복잡할 수 있다. 보통 모달의 열림/닫힘 상태를 관리하기 위해 보통 boolean 값을 사용하는 방식을 많이 채택한다. 최근에는 URL을 기반으로 모달 상태를 관리하는 방법이 떠오르고 있다. 이번 글에서는 Next.js의 App Router에서 제공하는 Parallel Routes 기능을 활용하여 모달 상태 관리를 URL 기반으로 리팩토링한 경험을 공유하려 한다. 단순히 boolean 값으로 관리하던 모달 상태를 왜 URL 기반으로 바꾸었는지, 그리고 이러한 접근 방식이 어떤 이점을 가져다주는지 함께 살펴보자.Parallel Routes란?Next.js의 A..

React 2025.03.18

TanStack Router v7로 타입 안전한 라우팅 구현하기

최근에 루키톤을 하고있다! 같이 하는 제롬이 리액트 라우터 돔을 많이 싫어해서... TanStack Router를 도입했다.React Router를 사용하다가 TanStack Router를 사용해보면서 겪은 경험과 장점들을 정리해봤다. TanStack Router이란? 🤔TanStack Router는 React Router v7이라고도 불린다.파일 시스템 기반 라우팅과 타입 안전성이 특징인 라우터 라이브러리이다. Next의 파일 기반 라우터를 좋아했던 사람들이라면 이것 역시 좋아할 듯주요 특징1. 파일 시스템 기반 라우팅2. 완벽한 타입스크립트 지원3. 자동 코드 분할4. 성능 최적화시작하기 👶먼저 필요한 패키지를 설치해준다.pnpm add @tanstack/react-router 설치 후에 vite..

React 2024.11.17
728x90