#TIL29, ๐ŸŒˆReact Advanced Routerโญ๏ธ

april_5ยท2021๋…„ 5์›” 23์ผ
0

React๐Ÿš€

๋ชฉ๋ก ๋ณด๊ธฐ
15/31
post-thumbnail

๊ฐœ์ธ ๊ณต๋ถ€๋ฅผ ์œ„ํ•ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค

โญ๏ธRouting

  • route + -ing : ๊ฒฝ๋กœ(route)๋ฅผ ์ฐพ์•„๊ฐ€๋Š” ํ–‰์œ„
  • ์ฆ‰ ๋ผ์šฐํŒ… ์ด๋ž€, ๋‹ค๋ฅธ ๊ฒฝ๋กœ(url ์ฃผ์†Œ)์— ๋”ฐ๋ผ ๋‹ค๋ฅธ View(ํ™”๋ฉด)๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ. React Router

โ—์ •์  ๋ผ์šฐํŒ…

์ •ํ•ด์ง„ ๊ฒฝ์šฐ(์ •์ , static)์— ๋Œ€ํ•ด์„œ๋งŒ ๊ฒฝ๋กœ๋ฅผ ํ‘œํ˜„

"/"         => <App />
"/users"    => <Users />
"/products" => <Products />

โœจ๋™์  ๋ผ์šฐํŒ…

๋™์ ์ธ ๊ฒฝ๋กœ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ Path Parameter ์™€ Query Parameter๊ฐ€ ์žˆ๋‹ค

โ—‹Dynamic Routing & Path Parameter

๋ผ์šฐํŠธ ๊ฒฝ๋กœ ๋์— ๋“ค์–ด๊ฐ€๋Š” ๊ฐ๊ธฐ ๋‹ค๋ฅธ id ๊ฐ’๋“ค์„ ์ €์žฅํ•˜๋Š” ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ Path Parameter ๋ผ๊ณ  ํ•œ๋‹ค

localhost:3000/product/2
localhost:3000/product/45
localhost:3000/product/125
  • Path Parameter ๋Š” Routes ์ปดํฌ๋„ŒํŠธ์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ •์˜๋œ๋‹ค
<Router>
  <Switch>
    <Route exact path='/product/:id' component={productDetail} />
  </Switch>
</Router>
  • : ๋Š” Path Parameter ๊ฐ€ ์˜ฌ ๊ฒƒ์ž„์„ ์˜๋ฏธ.
  • id ๋Š” ํ•ด๋‹น Path Parameter ์˜ ์ด๋ฆ„์„ ์˜๋ฏธ.
  • ๋ณ€์ˆ˜ ๋ช…์„ ์ง“๋“ฏ์ด, ์ž„์˜์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค. ex) :productId

โ—history, match, location ๊ฐ์ฒด

Routes.js ์˜ Route ์ปดํฌ๋„ŒํŠธ์˜ component ํ”„๋กœํผํ‹ฐ์— ์ง์ ‘ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š” ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” history, location, match 3๊ฐ€์ง€ ๊ฐ์ฒด๋ฅผ props ๋ฅผ ํ†ตํ•ด ์ œ๊ณต ๋ฐ›๋Š”๋‹ค.

  • history ๊ฐ์ฒด๋Š” ํŽ˜์ด์ง€ ์ด๋™์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ ๋ฉ”์„œ๋“œ๋“ค์„ ๋‹ด๊ณ  ์žˆ๋‹ค. (ex, push)
  • location ๊ฐ์ฒด๋Š” ํ˜„์žฌ url ๊ฒฝ๋กœ์— ๊ด€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๋Š”๋‹ค.
  • match ๊ฐ์ฒด๋Š” Path Parameter ์— ๊ด€ํ•œ ์ •๋ณด๋ฅผ ๋‹ด๋Š”๋‹ค.

๐Ÿ“Œ์ฐธ๊ณ !! withRouter HOC๐ŸŽˆ

  • Route ์— ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์—, history, location, match ๊ฐ์ฒด๋ฅผ ์ œ๊ณต๋ฐ›์ง€ ๋ชปํ•œ๋‹ค
  • ํ•˜์ง€๋งŒ, ์—ฐ๊ฒฐ ๋˜์–ด์žˆ์ง€ ์•Š์€ ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์„ธ๊ฐ€์ง€ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ์—” withRouter HOC ๊ฐ€ ๊ทธ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค.
    -withRouter ๋Š” ํ•จ์ˆ˜์ด๋‹ค.
  • ์ธ์ž๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ›๊ณ , ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ์— 3๊ฐ€์ง€ ๊ฐ์ฒด๋ฅผ ์ถ”๊ฐ€ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.๐Ÿ’ก

โ—‹Pagination & Query Parameter

โ—Query Parameter

์ฟผ๋ฆฌ ์ŠคํŠธ๋ง์ด๋ž€ ๋ง ๊ทธ๋Œ€๋กœ ํ•ด๋‹น ์—”๋“œํฌ์ธํŠธ์— ๋Œ€ํ•ด ์งˆ์˜๋ฌธ(query)๋ฅผ ๋ณด๋‚ด๋Š” ์š”์ฒญ์„ ๋œปํ•œ๋‹ค

์ฟผ๋ฆฌ์ŠคํŠธ๋ง์„ ์ด์šฉํ•œ ํŽ˜์ด์ง€ ๋„ค์ด์…˜ ๊ธฐ๋Šฅ ๋˜ํ•œ ๋™์  ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ๊ณผ ํฌ๊ฒŒ ๋‹ค๋ฅด์ง€ ์•Š๋Š”๋ฐ, ๋‘ ๊ธฐ๋Šฅ์˜ ๊ตฌํ˜„ ์ˆœ์„œ๋ฅผ ๋น„๊ตํ•ด๋ณด๋ฉด!

:: ๋™์  ๋ผ์šฐํŒ…

  1. ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€์—์„œ ์นด๋“œ๋ฅผ ํด๋ฆญ.
  2. url ์ด๋™. ์ด๋•Œ, ์นด๋“œ์˜ ๊ณ ์œ ํ•œ id ๊ฐ’์ด url ์— ํฌํ•จ๋œ๋‹ค.
  3. ์ด๋™ํ•œ ํŽ˜์ด์ง€์—์„œ, url ์— ๋‹ด๊ฒจ์žˆ๋Š” id ๊ฐ’์„ match ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐ€์ ธ์˜จ๋‹ค.
  4. ๊ฐ€์ ธ์˜จ id ๊ฐ’์„ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•œ๋‹ค.

:: ํŽ˜์ด์ง€๋„ค์ด์…˜

  1. ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€์—์„œ ๋ฒ„ํŠผ์„ ํด๋ฆญ.
  2. url ์ด๋™. ์ด๋•Œ url ์—๋Š” ๊ฐ ๋ฒ„ํŠผ์— ํ•ด๋‹นํ•˜๋Š” ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์ด ํฌํ•จ๋œ๋‹ค.
  3. ์ด๋™ํ•œ ํŽ˜์ด์ง€์—์„œ, url ์— ๋‹ด๊ฒจ์žˆ๋Š” ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์„ location ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐ€์ ธ์˜จ๋‹ค.
  4. ๊ฐ€์ ธ์˜จ ์ฟผ๋ฆฌ์ŠคํŠธ๋ง์„ ์ด์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•œ๋‹ค.

์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ ์ ์šฉ ์˜ˆ์‹œ

fetch(`${GET_CATEGORY_API}/categories?size=10&page=${num}`)
  .then(response => response.json())
  .then(productsdata => {
  this.setState({
    productsData: productsdata.message,
    num: num + 1,
  });
});

โœ… ๋ชฉํ‘œ!

  • Path Parameter์™€ Query Parameter ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋‹ค
  • history, location, match ๊ฐ์ฒด์˜ ์šฉ๋„๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์„ค๋ช…ํ•  ์ˆ˜ ์žˆ๋‹ค
  • URL ์—์„œ ๋™์ ์ธ ๋ถ€๋ถ„์„ ๋ณ€์ˆ˜๋กœ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ณ , ์ด๋ฅผ ํ†ตํ•ด ๋™์  ๋ผ์šฐํŒ… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค
  • offset ๊ณผ limit ๊ฐœ๋…์„ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๋„ค์ด์…˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค
profile
๐Ÿš€ ๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์“ฐ๋Š” ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ

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