๐Ÿ’ป React - react router v6 ์ ์šฉํ•˜๊ธฐ

waterglassesยท2022๋…„ 6์›” 11์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
32/50
post-thumbnail

โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ƒ ์˜ค๋Š˜ ๊ณต๋ถ€ํ•œ ๊ฒƒ

React Router

React Router

๋ผ์šฐํŒ…์ด๋ž€?

์—ฌ๋Ÿฌ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ๋•Œ ํŽ˜์ด์ง€๋ณ„๋กœ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ถ„๋ฆฌํ•ด๊ฐ€๋ฉด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ์ด๋‹ค.

React Router

React๋ฅผ ์œ„ํ•œ ๋ชจ๋“  ๊ธฐ๋Šฅ์„ ๊ฐ–์ถ˜ ํด๋ผ์ด์–ธํŠธ ๋ฐ ์„œ๋ฒ„์ธก ๋ผ์šฐํŒ… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. React๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋ชจ๋“  ๊ณณ(nodejs, react native, web ๋“ฑ)์—์„œ ์‹คํ–‰๋œ๋‹ค.

Next.js

๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ์˜ ํ”„๋ ˆ์ž„์›Œํฌ์ด๋‹ค. cra ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ ์„ค์ •, SSR ๋“ฑ์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ณ  next.js๋Š” ํŒŒ์ผ ๊ฒฝ๋กœ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ผ์šฐํŠธ๊ฐ€ ์ž‘๋™ํ•œ๋‹ค.

React Router๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ผ์šฐํ„ฐ ๊ตฌํ˜„ํ•˜๊ธฐ

1. BrowserRouter

BrowserRouter๋Š” HTML5dml History API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ URL๊ณผ UI๋ฅผ ๋™๊ธฐํ™”ํ•ด์ฃผ๋Š” Router์ด๋‹ค.

ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜์ง€ ์•Š์•„๋„ ์ฃผ์†Œ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๊ณ , ํ˜„์žฌ ์ฃผ์†Œ์— ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ props๋กœ ์กฐํšŒ ๋ฐ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋„๋ก ํ•œ๋‹ค.

๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ๋”์„ ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ์ปดํฌ๋„ŒํŠธ์˜ ์ตœ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— App์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค.

// cra๋กœ ์ƒ์„ฑํ•œ ์•ฑ์—์„œ index.js
<React.StrictMode>
  <BrowserRouter>
  <App />
  </BrowserRouter>
</React.StrictMode>

2. ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ

๊ฐ ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉํ•  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์•„๋ž˜์ฒ˜๋Ÿผ ๋งŒ๋“ ๋‹ค.

๐Ÿ“ฆpages
โ”ฃ ๐Ÿ“œLoginPage.js
โ”ฃ ๐Ÿ“œMainPage.js
โ”— ๐Ÿ“œSignUpPage.js

// MainPage.js
const MainPage = () => {
  return <div>Main</div>
}

export default MainPage

3. Route ์ปดํฌ๋„ŒํŠธ๋กœ ์›ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ์„ค์ •ํ•ด์ฃผ๊ธฐ

react router v6๋Š” Route๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.
<Route path="์ฃผ์†Œ" element={๋ณด์—ฌ ์ค„ ์ปดํฌ๋„ŒํŠธ } />

// main, login, sign-upํŽ˜์ด์ง€ ๋ผ์šฐํŠธ ์„ค์ •
<Routes>
  <Route path="/" element={<MainPage />} />
  <Route path="/login" element={<LoginPage />} />
  <Route path="/sign-up" element={<SignUpPage />} />
</Routes>

๐Ÿ”ฅ ๋Š๋‚€์ 

์•„๋ฌด๋ž˜๋„ ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ ์„ค์ •์ด๋‹ค ๋ณด๋‹ˆ ๊ธฐ๋ณธ์ ์ธ ๋‚ด์šฉ๋งŒ ์„ค์ •ํ•ด๋‘์—ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” ์ด๋ ‡๊ฒŒ ์‹œ์ž‘ํ•˜๊ณ  ์ฐจ์ฐจ ํŽ˜์ด์ง€๋„ ๋‚ด์šฉ๋„ ๋งŽ์•„์งˆ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ž˜ ์„ค์ •ํ•ด ์ค€ ๊ฒƒ ๊ฐ™๋‹ค.

๋‹ค๊ฐ™์ด ์‚ฌ์šฉํ•  ๋ถ€๋ถ„์ด๊ธฐ ๋•Œ๋ฌธ์— ์กฐ๊ธˆ ๋” ์‹ ์ค‘ํ•ด์ง€๊ณ  ์กฐ์‹ฌ์Šค๋Ÿฌ์›Œ ์ง€๋Š” ๋ถ€๋ถ„์ด๋‹ค. ๊ทธ๋ž˜์„œ ๋”์šฑ ํ™•์žฅ์„ฑ ์žˆ๊ฒŒ ๋งŒ๋“ค๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ๋‹ค.

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€