React Router 핵심 정리

1
npm install react-router-dom

1
2
3
4
5
6
7
├─src/
│  ├─routes/
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  └─Home.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
export default function Home() {
  return <h1>Home</h1>
}

1
2
3
export default function About() {
  return <h1>About</h1>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  }
])

export default function Router() {
  return <RouterProvider router={router} />
}

1
2
3
4
5
6
7
8
9
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Router from './routes'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Router />
  </StrictMode>
)

1
2
3
4
5
6
7
8
9
10
11
├─src/
│  ├─components/
│  │  └─TheHeader.tsx
│  ├─routes/
│  │  ├─layouts/
│  │  │  └─Default.tsx
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  └─Home.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
4
5
6
7
8
9
10
export default function TheHeader() {
  return (
    <header>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  )
}

1
2
3
4
5
6
7
8
9
10
11
import { Outlet } from 'react-router-dom'
import TheHeader from '@/components/TheHeader'

export default function DefaultLayout() {
  return (
    <>
      <TheHeader />
      <Outlet />
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import DefaultLayout from './layouts/Default'
import Home from './pages/Home'
import About from './pages/About'

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      {
        path: '/',
        element: <Home />
      },
      {
        path: '/about',
        element: <About />
      }
    ]
  }
])

export default function Router() {
  return <RouterProvider router={router} />
}

1
2
3
4
5
6
7
8
9
10
11
12
import { Outlet, ScrollRestoration } from 'react-router-dom'
import TheHeader from '@/components/TheHeader'

export default function DefaultLayout() {
  return (
    <>
      <TheHeader />
      <Outlet />
      <ScrollRestoration />
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
import { Link } from 'react-router-dom'

export default function TheHeader() {
  return (
    <header>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
    </header>
  )
}

1
2
3
4
5
<Link 
  to="/about"
  replace>
  About
</Link>

1
2
3
4
5
6
7
8
9
10
11
12
import { NavLink } from 'react-router-dom'

export default function TheHeader() {
  return (
    <header>
      <nav>
        <NavLink to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
      </nav>
    </header>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
├─src/
│  ├─components/
│  │  ├─TheHeader.module.css
│  │  └─TheHeader.tsx
│  ├─routes/
│  │  ├─layouts/
│  │  │  └─Default.tsx
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  └─Home.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
4
5
6
7
8
.nav {
  display: flex;
  gap: 14px;
}
.active {
  color: red;
  font-weight: bold;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { NavLink } from 'react-router-dom'
import styles from './TheHeader.module.css'

export default function TheHeader() {
  return (
    <header>
       <nav className={styles.nav}>
        <NavLink
          to="/"
          className={({ isActive }) => (isActive ? styles.active : '')}>
          Home
        </NavLink>
        <NavLink
          to="/about"
          className={({ isActive }) => (isActive ? styles.active : '')}>
          About
        </NavLink>
      </nav>
    </header>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { NavLink } from 'react-router-dom'
import styles from './TheHeader.module.css'

const navigations = [
  { to: '/', label: 'Home' },
  { to: '/about', label: 'About' }
]

export default function TheHeader() {
  return (
    <header>
      <nav className={styles.nav}>
        {navigations.map(nav => (
          <NavLink
            key={nav.to}
            to={nav.to}
            className={({ isActive }) => (isActive ? styles.active : '')}>
            {nav.label}
          </NavLink>
        ))}
      </nav>
    </header>
  )
}

1
2
3
4
5
6
7
8
<NavLink to="/about">
  {({ isActive }) => (
    <>
      <span className={isActive ? styles.active : ''}>About</span>
      페이지로 이동
    </>
  )}
</NavLink>

1
2
3
4
5
6
7
8
9
10
11
12
13
├─src/
│  ├─components/
│  │  ├─TheHeader.module.css
│  │  └─TheHeader.tsx
│  ├─routes/
│  │  ├─layouts/
│  │  │  └─Default.tsx
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  ├─Home.tsx
│  │  │  └─MovieDetails.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// ...
import MovieDetails from './pages/MovieDetails'

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      // ...
      {
        path: '/movies/:movieId',
        element: <MovieDetails />
      }
    ]
  }
])

export default function Router() {
  return <RouterProvider router={router} />
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'

interface Movie {
  Title: string // 영화 제목
  Poster: string // 영화 포스터 URL
}

export default function MovieDetails() {
  const [movie, setMovie] = useState<Movie | null>(null)
  const { movieId } = useParams()

  useEffect(() => {
    fetchMovie()
  }, [movieId])

  async function fetchMovie() {
    const res = await fetch(`https://www.omdbapi.com/?apikey=7035c60c&i=${movieId}`)
    const movie = await res.json()
    setMovie(movie)
  }

  return <h1>{movie?.Title}</h1>
}

1
2
3
4
5
6
7
8
9
import { NavLink } from 'react-router-dom'
import styles from './TheHeader.module.css'

const navigations = [
  { to: '/', label: 'Home' },
  { to: '/about', label: 'About' },
  { to: '/movies/tt4154796', label: 'Movie(Avengers: Endgame)' }
]
// ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
createBrowserRouter([
  {
    path: '/parent',
    element: <Parent />,
    children: [
      {
        path: 'child' // '/parent/child'
        element: <Child />
      }
    ]
  }
])

function Parent() {
  return (
    <>
      <h1>Parent</h1>
      <Outlet />
    </>
  )
}
function Child() {
  return <h2>Child</h2>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├─src/
│  ├─components/
│  │  ├─TheHeader.module.css
│  │  └─TheHeader.tsx
│  ├─routes/
│  │  ├─layouts/
│  │  │  └─Default.tsx
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  ├─Home.tsx
│  │  │  ├─MovieDetails.module.css
│  │  │  ├─MovieDetails.tsx
│  │  │  └─Movies.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// ...
import Movies from './pages/Movies'
import MovieDetails from './pages/MovieDetails'

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      // ...
      {
        path: '/movies',
        element: <Movies />,
        children: [
          {
            path: ':movieId', // '/movies/:movieId'
            element: <MovieDetails />
          }
        ]
      }
    ]
  }
])

export default function Router() {
  return <RouterProvider router={router} />
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { useState } from 'react'
import { Link, Outlet } from 'react-router-dom'

interface Movie {
  imdbID: string
  Title: string
  Poster: string
}

export default function Movies() {
  const [title, setTitle] = useState('')
  const [movies, setMovies] = useState<Movie[]>([])

  async function fetchMovies() {
    const res = await fetch(`https://www.omdbapi.com/?apikey=7035c60c&s=${title}`)
    const { Search: movies } = await res.json()
    setMovies(movies)
  }

  return (
    <>
      <h1>Movies</h1>
      <input
        value={title}
        onChange={e => setTitle(e.target.value)}
        onKeyDown={e => { if (e.key === 'Enter') fetchMovies() }}
      />
      <button onClick={fetchMovies}>Search</button>
      <ul>
        {movies.map(movie => (
          <li key={movie.imdbID}>
            <Link to={`/movies/${movie.imdbID}`}>{movie.Title}</Link>
          </li>
        ))}
      </ul>
      <Outlet />
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ...
import styles from './MovieDetails.module.css'

export default function MovieDetails() {
  // ...

  return (
    <div className={styles.modal}>
      <div
        className={styles.overlay}
        onClick={() => navigate(-1)}
      />
      <div className={styles.content}>
        <h1>{movie?.Title}</h1>
      </div>
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.content {
  position: relative;
  max-width: 500px;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { NavLink } from 'react-router-dom'
import styles from './TheHeader.module.css'

const navigations = [
  { to: '/', label: 'Home' },
  { to: '/about', label: 'About' },
  { to: '/movies', label: 'Movies' },
  { to: '/movies/tt4154796', label: 'Movie(Avengers: Endgame)' }
]

export default function TheHeader() {
  return (
    <header>
      <nav className={styles.nav}>
        {navigations.map(nav => (
          <NavLink
            key={nav.to}
            to={nav.to}
            end
            className={({ isActive }) => (isActive ? styles.active : '')}>
            {nav.label}
          </NavLink>
        ))}
      </nav>
    </header>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { useState } from 'react'
import { Link, useOutlet } from 'react-router-dom'
// ...

export default function Movies() {
  const outlet = useOutlet()
  // ...

  return (
    <>
      {/* ... */}
      {outlet}
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├─src/
│  ├─components/
│  │  ├─TheHeader.module.css
│  │  └─TheHeader.tsx
│  ├─routes/
│  │  ├─layouts/
│  │  │  └─Default.tsx
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  ├─Home.tsx
│  │  │  ├─MovieDetails.module.css
│  │  │  ├─MovieDetails.tsx
│  │  │  ├─Movies.tsx
│  │  │  └─NotFound.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
export default function NotFound() {
  return <h1>404 Page Not Found / 페이지를 찾을 수 없습니다.</h1>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ...
import NotFound from './NotFound'

const router = createBrowserRouter([
  // ...
  // 가장 마지막에 위치!
  {
    path: '*',
    element: <NotFound />
  }
])

export default function Router() {
  return <RouterProvider router={router} />
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├─src/
│  ├─components/
│  │  ├─TheHeader.module.css
│  │  └─TheHeader.tsx
│  ├─routes/
│  │  ├─loaders/
│  │  │  └─requiresAuth.ts
│  │  ├─layouts/
│  │  │  └─Default.tsx
│  │  ├─pages/
│  │  │  ├─About.tsx
│  │  │  ├─Home.tsx
│  │  │  ├─MovieDetails.module.css
│  │  │  ├─MovieDetails.tsx
│  │  │  ├─Movies.tsx
│  │  │  ├─NotFound.tsx
│  │  │  └─SignIn.tsx
│  │  └─index.tsx
│  └─main.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { useSearchParams, useNavigate } from 'react-router-dom'

export default function SignIn() {
  const navigate = useNavigate()
  // 쿼리스트링 정보를 가져와 사용하기 쉽게 객체로 변환합니다.
  const [searchParams] = useSearchParams()
  const query = Object.fromEntries(searchParams)

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     // `<form>`의 새로고침(기본 동작)을 방지합니다.
    event.preventDefault()
     // `<form>`의 데이터를 가져와 사용하기 쉽게 객체로 변환합니다.
    const formData = new FormData(event.currentTarget)
    const { email, password } = Object.fromEntries(formData) as Record<string, string>
    // 로그인 정보가 모두 있으면, 임시로 로그인 처리합니다.
    if (email && password) { 
      localStorage.setItem('access_token', 'abcd1234')
      navigate(query.redirectTo || '/')
    }
  }

  return (
    <>
      <h1>Sign In</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          placeholder="Email"
        />
        <input
          type="password"
          name="password"
          placeholder="Password"
        />
        <button type="submit">Sign In</button>
      </form>
    </>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { redirect } from 'react-router-dom'

export interface User {
  name: string
  age: number
}

async function getUser() {
  const token = localStorage.getItem('access_token')
  // const res = await fetch('httsp://api.heropy.dev/user/me', {
  //   headers: { 'Authorization': `Bearer ${token}` }
  // })
  // return res.json()
  
  // 토큰 정보가 있으면, 사용자 정보를 반환합니다.
  if (token) return { name: 'Neo', age: 22 } satisfies User
  return null
}

// 페이지 접근 시 호출되는 로더(Loader) 함수!
export async function requiresAuth({ request }: { request: Request }) {
  const user = await getUser()
  if (!user) {
    const url = new URL(request.url) // 요청 페이지의 URL 정보를 가져옵니다.
    const redirectTo = url.pathname + url.search // 요청 페이지의 경로 + 쿼리스트링
    return redirect(`/signin?redirectTo=${encodeURIComponent(redirectTo)}`) // 돌아갈 페이지 정보(`redirectTo`)와 함께 로그인 페이지로 이동합니다.
  }
  return user // 반환하는 데이터는 `useLoaderData` 훅으로 사용할 수 있습니다.
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// ...
import SignIn from './pages/SignIn'
import { requiresAuth } from './loaders/requiresAuth'

const router = createBrowserRouter([
  {
    element: <DefaultLayout />,
    children: [
      // ...
      {
        path: '/signin',
        element: <SignIn />
      },
      {
        path: '/movies',
        element: <Movies />,
        loader: requiresAuth,
        children: [
          {
            path: ':movieId',
            element: <MovieDetails />
          }
        ]
      }
      // ...
    ]
  }
])

export default function Router() {
  return <RouterProvider router={router} />
}

1
2
3
4
5
6
7
// ...
import type { User } from '@/routes/loaders/requiresAuth'

export default function Movies() {
  const user = useLoaderData() as User | undefined
  // ...
}

1
npm i framer-motion

1
2
3
4
5
6
<motion.div
  initial={시작상태}
  animate={종료상태}
  transition={전환옵션}>
  {애니메이션 적용 대상}
</motion.div>

1
2
3
4
5
6
7
8
9
10
<AnimatePresence>
  <motion.div
    key={고유한값}
    initial={시작상태}
    animate={종료상태}
    exit={종료상태}
    transition={전환옵션}>
    {애니메이션 적용 대상}
  </motion.div>
</AnimatePresence>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { motion, AnimatePresence } from 'framer-motion'
import { useLocation, useOutlet, ScrollRestoration } from 'react-router-dom'
import TheHeader from '@/components/TheHeader'

export default function DefaultLayout() {
  const location = useLocation()
  const outlet = useOutlet()

  return (
    <>
      <TheHeader />
      <AnimatePresence>
        <motion.div
          key={location.pathname}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0, position: 'absolute' }}
          transition={{ duration: 0.3 }}>
          {outlet}
        </motion.div>
      </AnimatePresence>
      <ScrollRestoration />
    </>
  )
}

1
2
3
{
  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

1
/*  /index.html  200

1
2
3
4
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

1
2
3
4
5
6
7
8
9
10
11
{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}