๐ฃ Next.js_02 Dynamic Routes, next/link
Next.js
์ฝ๋ฉ์๋ง Next.js ๊ฐ์๋ฅผ ๋ณด๊ณ ์ ๋ฆฌํ ๋ด์ฉ์
๋๋ค.
๐ช axios
axios
- API ํธ์ถ์ ํ๊ธฐ ์ํด
axios
์ค์น
$ npm i axios
import Axios from "axios";
import Head from "next/head";
import { useEffect } from "react";
export default function Home() {
const API_URL =
"http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline";
// ์ต์ด์ ์ง์
ํ์ ๋ ๋ฐ์ดํฐ ํธ์ถ์ ์ํ ํจ์
function getData() {
Axios.get(API_URL).then((res) => {
// API ํธ์ถ์ด ์ ๋๋์ง ํ์ธ
console.log(res);
});
}
// ์ต์ด์ ์ง์
ํ์ ๋ ํ ๋ฒ๋ง ํธ์ถํ๋ฉด ๋๋ฏ๋ก useEffect ์ฌ์ฉ
useEffect(() => {
getData();
}, []);
return (
<div>
<Head>
<title>Home | ๋ณด๋ฆฌ๊ตฌ๋ฆฌ</title>
</Head>
</div>
);
}
- API ํธ์ถ ํ์ธ
๐ช useEffect
axios
axios
axios
์ค์น$ npm i axios
import Axios from "axios";
import Head from "next/head";
import { useEffect } from "react";
export default function Home() {
const API_URL =
"http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline";
// ์ต์ด์ ์ง์
ํ์ ๋ ๋ฐ์ดํฐ ํธ์ถ์ ์ํ ํจ์
function getData() {
Axios.get(API_URL).then((res) => {
// API ํธ์ถ์ด ์ ๋๋์ง ํ์ธ
console.log(res);
});
}
// ์ต์ด์ ์ง์
ํ์ ๋ ํ ๋ฒ๋ง ํธ์ถํ๋ฉด ๋๋ฏ๋ก useEffect ์ฌ์ฉ
useEffect(() => {
getData();
}, []);
return (
<div>
<Head>
<title>Home | ๋ณด๋ฆฌ๊ตฌ๋ฆฌ</title>
</Head>
</div>
);
}
useEffect๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ดํธ/์ธ๋ง์ดํธ/์ ๋ฐ์ดํธ์ ํ ์์ ์ค์ ํ๊ธฐ
-
useEffect๋ฅผ ์ด์ฉํ์ฌ
- ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ๋์ ๋(์ฒ์ ๋ํ๋ฌ์ ๋)
- ์ธ๋ง์ดํธ ๋์ ๋(์ฌ๋ผ์ง ๋)
- ์ ๋ฐ์ดํธ ๋์์ ๋(ํน์ props๊ฐ ๋ฐ๋ ๋)
ํน์ ์์ ์ ์ฒ๋ฆฌํ ์ ์๋ค.
import React, { useEffect } from 'react';
function User({ user }) {
useEffect(() => {
console.log('์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์ ๋ํ๋จ');
return () => {
console.log('์ปดํฌ๋ํธ๊ฐ ํ๋ฉด์์ ์ฌ๋ผ์ง');
};
}, []);
useEffect
์ฒซ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ : ํจ์useEffect
๋ ๋ฒ์งธ ํ๋ผ๋ฏธํฐ : ์์กด๊ฐ์ด ๋ค์ด์๋ ๋ฐฐ์ด (deps)
๋ง์ดํธ ์ ํ๋ ์์ ๋ค
props
๋ก ๋ฐ์ ๊ฐ์ ์ปดํฌ๋ํธ์ ๋ก์ปฌ ์ํ๋ก ์ค์ - ์ธ๋ถ API ์์ฒญ (REST API ๋ฑ)
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฌ์ฉ (D3, Video.js ๋ฑ)
setInterval
์ ํตํ ๋ฐ๋ณต์์ ๋๋setTimeout
์ ํตํ ์์ ์์ฝ
์ธ๋ง์ดํธ ์ ํ๋ ์์
setInterval
,setTimeout
์ ์ฌ์ฉํ์ฌ ๋ฑ๋กํ ์์ ๋คclear
ํ๊ธฐ (clearInterval
,clearTimeout
)- ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ธ์คํด์ค ์ ๊ฑฐ
deps
-
๋น ๋ฐฐ์ด : ์ฒ์์ ํ ๋ฒ๋ง ํจ์ ํธ์ถ
-
ํน์ ๊ฐ ๋ฃ๊ธฐ
- ์ปดํฌ๋ํธ๊ฐ ์ฒ์ ๋ง์ดํธ ๋ ๋ ํธ์ถ์ด ๋๊ณ , ์ง์ ํ ๊ฐ์ด ๋ฐ๋ ๋์๋ ํธ์ถ
- deps ์์ ํน์ ๊ฐ์ด ์๋ค๋ฉด ์ธ๋ง์ดํธ ์์๋ ํธ์ถ, ๊ฐ์ด ๋ฐ๋๊ธฐ ์ง์ ์๋ ํธ์ถ
useEffect
์์์ ์ฌ์ฉํ๋ ์ํ๋, props๊ฐ ์๋ค๋ฉดuseEffect
์deps
์ ๋ฃ์ด์ผํ๋ค.(๊ท์น)
-
ํ๋ผ๋ฏธํฐ ์๋ต
deps
ํ๋ผ๋ฏธํฐ๋ฅผ ์๋ตํ๋ฉด, ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋ ๋๋ง๋ค ํธ์ถ
๐ช useState
useState ๋ฅผ ํตํด ์ปดํฌ๋ํธ์์ ๋ฐ๋๋ ๊ฐ ๊ด๋ฆฌํ๊ธฐ
๋ฆฌ์กํธ 16.8 ์ด์ ๋ฒ์ ์์๋ ํจ์ํ ์ปดํฌ๋ํธ์์๋ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์์์ผ๋, ๋ฆฌ์กํธ 16.8์์ Hooks ๊ธฐ๋ฅ์ด ๋์ ๋๋ฉด์ ํจ์ํ ์ปดํฌ๋ํธ์์๋ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๊ฒ ๋์๋ค.
์ด๋ฒคํธ ์ค์
- Counter์์ ๋ฒํผ์ด ํด๋ฆญ๋๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋, ํน์ ํจ์๊ฐ ํธ์ถ๋๋๋ก ์ค์
import React from 'react';
function Counter() {
const onIncrease = () => {
console.log('+1');
}
const onDecrease = () => {
console.log('-1');
}
return (
<div>
<h1>0</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}
export default Counter;
useState
- ๋์ ์ธ ๊ฐ = ์ํ(state)
useState
ํจ์๋ฅผ ํตํด ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๊ด๋ฆฌํ ์ ์๋ค.
import React, { useState } from 'react';
// ๋ฆฌ์กํธ ํจํค์ง์์ useState ํจ์๋ฅผ ๋ถ๋ฌ์ด
function Counter() {
const [number, setNumber] = useState(0);
// number : ํ์ฌ ์ํ(์ฒซ ๋ฒ์งธ ์์)
// setNumber : Setter ํจ์(๋ ๋ฒ์งธ ์์)
// Setter ํจ์ : ํ๋ผ๋ฏธํฐ๋ก ์ ๋ฌ๋ฐ์ ๊ฐ์ ์ต์ ์ํ๋ก ์ค์
const onIncrease = () => {
setNumber(number + 1);
}
const onDecrease = () => {
setNumber(number - 1);
}
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}
export default Counter;
๐ช Dynamic Routes
- ํ์ผ๋ช
์ ๋๊ดํธ
[]
๋ก ๋ฌถ์ js ํ์ผ์ ์์ฑ/post/1
,/post/abc
๋ฑ๊ณผ ๊ฐ์ url์ ์ ์ํ์ ๋ ๋ชจ๋pages/post/[pid].js
ํ์ด์ง๋ก ์ด๋ํ๋ค.[pid]
๋ฅผ ํตํด์ ๊ฒฝ๋ก๊ฐ1
์ธ์งabc
์ธ์ง ์ป์ด๋ธ ๋ค์ ์ฌ์ฉ
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post
๐ช next/link
<a>
์ ์ฌ์ฉ๋ฒ ๊ฐ๋ค
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
</ul>
)
}
export default Home
<a>
๋ฅผ ๊ฐ์ธ๋ ์ปค์คํ ์ปดํฌ๋ํธ์ธ ๊ฒฝ์ฐ,<Link>
์passHref
์์ฑ์ด ํ์ํ๋ค.
=> styled-components ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ,passHref
์์ฑ์ด ์๋ค๋ฉด<a>
๋href
์์ฑ์ ๊ฐ์ง ์ ์๊ฒ ๋๋ค.- Futurama ๋ง๋ค ๋
passHref
์์ฑ์ ์ถ๊ฐํ์ง ์์<a>
๊ฐ ๋์ํ์ง ์์
=> ์ปค์คํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ,<a>
์๋ ํด๋์ค๋ฅผ ์ถ๊ฐํ์ฌ ์คํ์ผ์ ์ง์ ํ์ฌ ํด๊ฒฐํจ
- Futurama ๋ง๋ค ๋
import Link from 'next/link'
import styled from 'styled-components'
function NavLink({ href, name }) {
// passHref์์ฑ์ Link์ ์ถ๊ฐ
return (
<Link href={href} passHref>
<RedLink>{name}</RedLink>
</Link>
)
}
export default NavLink
// <a>๋ฅผ ๊ฐ์ธ๋ ์ปค์คํ
์ปดํฌ๋์ค๊ฐ ์์ฑ
const RedLink = styled.a`
color: red;
`
๐ช next/router
<Link>
๋์next/router
๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง๋ฅผ ๋งํฌnext/router
๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒฝ๋ก ์ด๋ฆ์ ์์ธ์คํ๊ณ ๊ตฌ์ฑ์์๋ฅผ ๋ ๋๋ง
import { useRouter } from "next/router";
import { Menu } from "semantic-ui-react";
export default function Gnb() {
const router = useRouter();
let activeItem = "home";
if (router.pathname === "/") {
activeItem = "home";
} else if (router.pathname === "/about") {
activeItem = "about";
}
function golink(e, data) {
if (data.name === "home") {
router.push("/");
} else if (data.name === "about") {
router.push("/about");
}
}
return (
<div>
<Menu inverted>
<Menu.Item
name="home"
active={activeItem === "home"}
onClick={golink}
/>
<Menu.Item
name="about"
active={activeItem === "about"}
onClick={golink}
/>
</Menu>
</div>
);
}
next/link
๋๋ next/router
๋ฅผ ์ฌ์ฉํ๋ ์ด์ ?
-
<a>
,location.href
=> ํ์ด์ง๊ฐ ์๋ก๊ณ ์นจ ๋๋ฉด์ ์ด๋
=> ํ์ด์ง๊ฐ ์๋ก ๊ทธ๋ ค์ง๋ค. = ์์ฒญ์ด ๋์ด๋จ
=> SPA(Single Page Application)์ ์ฅ์ ์ด ์ฌ๋ผ์ง -
next/link
,next/router
=> ํ์ด์ง๋ ๊ทธ๋๋ก ์์ผ๋ฉด์ ์์ ๋ด์ฉ๋ค๋ง ๋ฐ๋๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฃ Next.js_02 Dynamic Routes, next/link), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@qhflrnfl4324/Next.js02-Dynamic-Routes-nextlink์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค