๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ“บ Front End/-- react & redux & nextjs

[React Router] react-router-dom์˜ HashRouter๊ณผ BrowserRouter์˜ ์ฐจ์ด (BrowserRouter ๋ฅผ ์‚ฌ์šฉํ•˜์ž!)

by Wonit 2020. 10. 6.

์˜ค๋Š˜ ์•Œ์•„๋ณผ ๊ฒƒ์€ react-router-dom์˜ HashRouter๊ณผ BrowserRouter์ด๋‹ค.

 

React router์—๋Š” ๋งŽ์€ ๋ผ์šฐํ„ฐ๊ฐ€ ์žˆ์ง€๋งŒ ์˜ค๋Š˜์€ ๋‘ ๊ฐ€์ง€ Router์— ๋Œ€ํ•ด์„œ ๋น„๊ตํ•ด๋ณผ ๊ฒƒ์ด๋‹ค.

 

๊ฒŒ๋‹ค๊ฐ€ ์˜ค๋Š˜์€ ์ฝ”๋“œ๋ณด๋‹ค๋Š” ์ข€ ๋” ๊นŠ์€ ์ด๋ก ๊ณผ ๊ด€๋ จ๋œ ๋‚ด์šฉ์„ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

๋ฆฌ์•กํŠธ ๋ผ์šฐํŒ…์— ๊ด€ํ•ด์„œ๋Š”

Router

์šฐ์„  ๋‘ ๋ผ์šฐํ„ฐ๊ฐ„์˜ ์ฐจ์ด๋ฅผ ์•Œ๊ธฐ ์ „์— ๊ฐ€๋ณ๊ฒŒ <Router>์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

Router์€ ๋ชจ๋“  Router ์ปดํฌ๋„ŒํŠธ์˜ ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค.

 

Router์—๋Š” ๊ธฐ๋ณธ์ ์ธ ๋ผ์šฐํŒ… ๊ด€๋ จ ์†์„ฑ๋งŒ ์ •์˜๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์—

 

์šฐ๋ฆฌ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค.

  • <BrowserRouter>
  • <HashRouter>
  • <MemoryRouter>
  • <NativeRouter>
  • <StaticRouter>

 

Router์—๋Š” history ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ๋„ค์ด๊ฒŒ์ดํŒ…์„ ํ•œ๋‹ค.

reactrouter.com

์ด์ œ BrowserRouter๊ณผ HashRouter์— ๋Œ€ํ•ด์„œ ์ด์•ผ๊ธฐ ํ•ด๋ณด์ž.

BrowserRouter vs HashRouter

 

HashRouter

reactrouter.com

HashRouter์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • ์ฃผ์†Œ์— ํ•ด์‰ฌ(#)๊ฐ€ ๋ถ™๋Š”๋‹ค.
  • ๊ฒ€์ƒ‰ ์—”์ง„์ด ์ฝ์ง€ ๋ชปํ•œ๋‹ค.

URL Hash๋ฅผ ์‚ฌ์šฉํ•˜ HashRouter๋Š” ์ง€์›๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €๋‚˜ ์›น ์„œ๋ฒ„์— ์ œํ•œ์ด ์—†๋‹ค.

 

ํ•˜์ง€๋งŒ ์œ„์—์„œ ๋ง ํ•œ ๊ฒƒ ์ฒ˜๋Ÿผ example.com/#/messages/messages๊ณผ ๊ฐ™์ด ์ฃผ์†Œ์— ํ•ด์‰ฌ๊ฐ€ ๋ถ™๊ฒŒ ๋œ๋‹ค.

 

HashRouter์€ URL ํ•ด์‹œ๋ฅผ ์„œ๋ฒ„์—์„œ ์ฝ์„ ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— Server Side Rendering์œผ๋กœ ์„ค์ •์„ ๋ฐฑ์—…ํ•  ์ˆ˜๋Š” ์—†๋‹ค.

 

๋˜ํ•œ HashRouter์€ ํ•ด์‹œ ํžˆ์Šคํ† ๋ฆฌ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค.

 

BrowserRouter

reactrouter.com

 

  • Link ์ปดํฌ๋„ŒํŠธ๋กœ to ์†์„ฑ์— ์ด๋™ํ•  ๊ฒฝ๋กœ๋ฅผ ์จ์ค€๋‹ค.
  • Route ์ปดํฌ๋„ŒํŠธ path ์†์„ฑ์„ Link์˜ to์†์„ฑ์„ component mapping ๊ฒฝ๋กœ๋ฅผ ๊ธฐ์ˆ ํ•œ๋‹ค.
  • ์ƒˆ๋กœ๊ณ ์นจ ํ•˜๋ฉด ๊ฒฝ๋กœ์—์„œ ๋ชป ์ฐพ์•„ ์—๋Ÿฌ๊ฐ€ ๋‚œ๋‹ค.

๋Œ€๋ถ€๋ถ„ ๋ ˆ๊ฑฐ์‹œ ๋ธŒ๋ผ์šฐ์ €(IE9 ์ดํ•˜)์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค

 

BrowserRouter์€ History API๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

๊ทธ๋Ÿผ ๋ฌด์—‡์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ

์‚ฌ์‹ค ๋งŽ์€ React ์ฝ”๋“œ์—์„œ Routing ํ•˜๋Š” ๋กœ์ง์„ ์‚ดํŽด๋ณด๋ฉด BrowserRouter์ด ์••๋„์ ์œผ๋กœ ๋งŽ์€ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

 

์ด ์ด์œ ๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•œ๋ฐ, ์˜ˆ์ „์—๋Š” ์‚ฌ๋žŒ๋“ค์ด URL ์œ„์น˜๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š”๋ฐ javascript๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.


๊ทธ๋ž˜์„œ HashRouter๋ฅผ ์‚ฌ์šฉํ–ˆ๊ณ  ์ตœ๊ทผ์—๋Š” BrowserRouter๊ฐ€ ํƒ„์ƒํ–ˆ๊ณ  ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด HashRouter๋ฅผ ๋” ์ด์ƒ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

 

์œ„์—์„œ ๋ง ํ–ˆ๋“ฏ HashRouter๋Š” History location์„ ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋งŽ์€ ๋ถˆํŽธํ•จ์ด ์žˆ๋‹ค.

 

๋ฐ˜๋ฉด์— BrowserRouter์—์„œ๋Š” History location์„ ์ง€์›ํ•ด์„œ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฉ‹์ง„ ์›น์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค.

๋Œ“๊ธ€