[TIL] 20.12.27

HyeRyunยท2020๋…„ 12์›” 27์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
36/48

๐Ÿง ๋‹˜ ์˜ค๋Š˜ ๋ญํ•จ?

๐ŸŒฑ ์•Œ๊ฒŒ๋œ ์ 

  • ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ์“ธ ๋•Œ import React๋ฅผ ๋‘ ๋ฒˆ ํ•˜๊ฒŒ ๋˜๋ฉด Invalid hooks์–ด์ฉŒ๊ตฌ ์ €์ฉŒ๊ตฌ.. ์˜ค๋ฅ˜ ์ƒ๊น€. ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๋Š” ์ƒ๊ด€์—†์Œ.

  • ReactRouter
    ์ฃผ์†Œ ํ˜•ํƒœ : http://localhost:8080/rock-scissors-paper
    ์ƒˆ๋กœ๊ณ ์นจ ์‹œ,
    ์ด๋ ‡๊ฒŒ ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค.

  • HashRouter
    ์ฃผ์†Œ ํ˜•ํƒœ : http://localhost:8080/#/rock-scissors-paper
    (์ค‘๊ฐ„์— #๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค)
    ์ƒˆ๋กœ๊ณ ์นจ ํ•ด๋„ ์ž˜ ๋Œ์•„๊ฐ„๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ ๊ฒ€์ƒ‰์—”์ง„์— ๋œจ์งˆ ์•Š์Œ. ๊ทธ๋ž˜์„œ ์‹ค๋ฌด์—์„œ ์ž˜ ์•ˆ์“ด๋‹ค๊ณ  ํ•œ๋‹ค.


๊ทผ๋ฐ ๋ผ์šฐํ„ฐ๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์•„์ง€๋ฉด ๋‹น์—ฐํ•˜๊ฒŒ๋„ ๊ด€๋ฆฌํ•˜๊ธฐ ํž˜๋“ค๋‹ค. ๊ทธ๋ž˜์„œ dynamic route matching ์„ ํ•œ๋‹ค. ๋ผ์šฐํ„ฐ ๊ฐœ์ˆ˜๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด.

  • history : ์ฃผ์†Œ์— ๋Œ€ํ•œ ์ •๋ณด
  • location : ํŽ˜์ด์ง€๊ฐ€ ์ด๋™ํ•œ ๋‚ด์—ญ(๋’ค๋กœ๊ฐ€๊ธฐ, ์•ž์œผ๋กœ ๊ฐ€๊ธฐ)
  • match : ๋™์  ๋ผ์šฐํŒ… ํ•  ๋•Œ params์— ๋Œ€ํ•œ ์ •๋ณด

params ์ •๋ณด๋ฅผ ํ†ตํ•ด ๊ฐ๊ฐ์˜ name์— ํ•ด๋‹นํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

  • queryString ์ •๋ณด๋Š” location > search

  • Switch ๋‚ด๋ถ€์— ๋ผ์šฐํ„ฐ๋ฅผ ๋‘๋ฉด ์ฒซ๋ฒˆ์งธ๋กœ ์ผ์น˜ํ•˜๋Š” ํŽ˜์ด์ง€๋งŒ ๋ณด์—ฌ์คŒ. Switch ์•ˆ ์“ฐ๊ณ  ๊ทธ๋ƒฅ ๋‘๋ฉด ์ผ์น˜ํ•˜๋Š” ๊ฒฝ๋กœ๋“ค์˜ ํŽ˜์ด์ง€๊ฐ€ ๋™์‹œ์— ๋‹ค ๋ณด์ž„;;
  • exact path : path์™€ ์ •ํ™•ํ•˜๊ฒŒ ์ผ์น˜ํ•˜๋Š” ์ฃผ์†Œ๋งŒ ๋ณด์—ฌ์คŒ. ์œ„ ์ฝ”๋“œ์—์„œ e

โœจ ๋Š๋‚€์ ์€?

๋ผ์šฐํ„ฐ ๋‚˜๋ˆ ์ฃผ๋Š”๊ฑฐ ๋ญ”๊ฐ€ ์žฌ๋ฐŒ๋‹ค. ์‹ ๊ธฐํ•˜๊ธฐ๋„ ํ•˜๊ณ .
์ง€๋ขฐ์ฐพ๊ธฐ ์ œ์™ธํ•˜๊ณ  ๊ธฐ๋ณธ ๊ฐ•์˜๋Š” ๋‹ค ๋“ค์—ˆ๋‹ค!

profile
๊ฐœ๋ฐœ๊ฐœ๋ฐœ

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