Router (5) 썸네일형 리스트형 05. 경로를 찾을 수 없습니다 다른 url 내부의 없는 주소로 이동해도 no-found.tsx 파일을 보여줄 것이다. navigation 파일에서 경로명을 알려주는 hook을 사용한다.NextJS에는 개발자에게 url에 관한 정보를 알려주는 hook들이 있으며 router까지 접근할 수 있게 해준다.지금 사용할 hook은 usePathname이라는 hook인데 path name이란 user가 현재 머물고 있는 url이다.사용자가 "/"에 있는지, "/about-us"에 있는지 등을 알려준다. 02. Routing layout.tsximport { Outlet } from "react-router-dom";export default function Layout(){ return( layout )} App.tsximport { useState } from 'react'import { createBrowserRouter, RouterProvider} from 'react-router-dom';import Layout from './components/layout';import Home from './routes/home';import Profile from './routes/profile';import Login from './routes.. 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.. 11. Practice Moive App - React Router 1. Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.: npm install react-router-dom 2. react-router-dom를 import 시켜준다.: 여러개가 아닌 하나만 랜더링 하기 위해서 Switch(Routes)를 사용한다.import { BrowserRouter as Router, Switch, Route} from "react-router-dom";function App() { // 누군가 만들어 놓은 컴포넌트를 잘 사용하면 된다. // Swith(Routes)가 하는 역할은 Route를 찾는 것인데 Route는 URL을 의미한다. // 사용자가 "/" 경로에 있으면 Home Route를 랜더링한다. return } .. 10. Practice Movie App - part Two Visual Studio Code 툴 내 터미널에서 아래 명령어를 실행한다.: npm i prop-types: npm install react-router-dom App.jsimport logo from './logo.svg';import './App.css';import { useEffect, useState } from 'react';import Movie from "./components/Movie";function App() { return null;}export default App; Movie.jsimport PropTypes from "prop-types"; //prop-types를 사용하기 위해서는 터미널에서 npm i prop-types를 실행해야 한다!function Movie.. 이전 1 다음
