본문 바로가기

Route

(3)
11. 다이나믹 루트 루트("/") 경로일 때 영화 목록이 표시되고 영화를 클릭하면 해당 영화 상세화면으로 넘어가게 하고 한다고 했을때app > movies > [id] 순으로 폴더를 생성하게 되면 next.js를 통해 http://localhost:3000/movies 경로 뒤에 property 값이 들어가게 된다.
10. 루트그룹과 메타데이터 route groupsroutes들을 그룹화해서 logical groups으로 만들 수 있는 기능이며 복잡한 일을 할 수 있다.예를들어, 루트 레이아웃을 사용하지 않고 여러 레이아웃을 사용하게 할 수 있다.또한 레이아웃 중에서 선택하거나 선택 해제하여 사용할 수 있다.예를들어, 중첩 레이아웃을 원하지 않는 경우에 route groups를 사용할 수 있다. root app 폴더에 layout.tsx, non-found.tsx, page.tsx 파일이 있다.layout.tsx 파일과 non-found.tsx 파일은 기본적으로 모든 페이지에 있어야 한다.non-found.tsx 파일은 없는 URL로 가면 보여줄 것이고 layout.tsx 파일은 app 폴더 내부의 있는 모든 폴더와 페이지에서 사용된다.루트..
12. Practice Moive App - Parameters 아래 App.js 파일을 보면 Router를 사용하여 해당 경로에 맞게 화면이 보여지게 되는데} /> Parameter는 :(콜론) + parameter값을 입력하면 Parameter로 사용되어진다.  Home.jsimport { useEffect, useState } from 'react';import Movie from "../components/Movie";function Home(){ const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async() => { const json = await(await fetch(`https://yts.mx/api..