-
오늘 리액트 쿼리 공부하려고 했는데,
곧 들어갈 프로젝트에서 Next.js 사용 할 수도 있어서 급하게 공부 중
오랜만에 새로운거 배우니까 잼따 🥰
오늘 느낀거지만 내가 현타 느낄 때는 리액트에서 상태관리라 라이브러리 공부할 때 인듯...
Next.js 13 (stable)
Routing
Index routes
- 라우터는 root 파일을 찾아서 렌더링하며 이는 index.js 로 작성
- 예시 : pages/blog/index.js 의 경로는 /blog 가 됨.
Nested routes
- 중첩 경로 중 경로 이름이 고정인 경우 파일 이름을 경로로 작성하면 됨.
- 예시 : • pages/blog/first-post.js → /blog/first-post
Dynamic route segments
- 다이나믹 경로는 [요걸로] 감싸줌.
- 예시 : pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
State
- 같은 페이지에서 라우팅할 경우, state는 초기화 되지 않는다.
- 예시 : pages/[num].js 의 pages/one.js pages/two.js 결론적으로 동일한 페이지를 사용하고 있기 때문에 상태가 초기화 되려면 직접 해야됨.
Linking
<Link>
import Link from 'next/link' function Home() { return ( <ul> <li> <Link href="/">Home</Link> </li> <li> <Link href="/about">About Us</Link> </li> </ul> ) } export default Home
- 클라이언트 사이드 라우트
import Link from 'next/link' function Posts({ posts }) { return ( <ul> {posts.map((post) => ( <li key={post.id}> // ⭐ dynamic route는 이렇게 이용 가능 <Link href={`/blog/${encodeURIComponent(post.slug)}`}> {post.title} </Link> </li> ))} </ul> ) } export default Posts
useRouter()
- hook으로 router 객체를 받는다.
- 관련 내용
- 메서드로 push() 가 있으며 <Link> 외에 직접 라우팅을 해줄 경우 사용.
Next.js (beta)
Routing: Fundamentals | Next.js
app Directory
- default로 app 폴더 내에 있는 파일은 React Server Components이다.
- routing system은 stable 버전과 동일하고 root 파일의 경우 page.js 로 명시함.
- linking, useRouter()도 stable 버전과 동일함.
- pages.js 로 변경된 이유는 중첩 경로에서 다양한 동작을 가진 UI 파일을 제공함. (하단의 file conventions 참고)
File Conventions
- page.js: 경로 root 파일
- route.js: 경로에 대한 서버 측 API 엔드 포인트 (next@canary에서 사용 가능).
- layout.js: 공통 레이아웃 UI (해당 페이지, 자식 페이지 모두 포함)
- template.js: layout.js와 유사하지만 경로 변경 시 새로운 컴포넌트 인스턴스가 마운트됨. 특정한 이유로만 사용되고 주로 레이아웃 사용.
- loading.js: 로딩 UI. 페이지나 하위 페이지를 React Suspense Boundary로 래핑함.
- error.js: 오류 UI. error.js는 페이지나 하위 세그먼트를 React Error Boundary로 래핑
- global-error.js: error.js와 비슷 / 루트에서 layout.js오류 날 때 사용. app/global-error.tsx
- not-found.js: NotFound UI.
'TIL > FrontEnd' 카테고리의 다른 글
React Query v3 (updated : 23.03.15) (0) 2023.02.27 230222 TIL : React Query 배운 내용 (0) 2023.02.23 230220 TIL: RTK Query 공부내용 (0) 2023.02.20 230215 TIL : 비동기 프로그래밍 (Promise Methods) (2) 2023.02.16 230214 TIL : 비동기 프로그래밍 (Promise) (0) 2023.02.15 댓글