๊ฐœ๋ฐœ/React

[React.Js] ๋ฆฌ์•กํŠธ Router ์‚ฌ์šฉํ•˜๊ธฐ

๋ฐ(Ming) ๐Ÿˆ‍โฌ› 2022. 2. 18. 00:06
728x90
๋ฐ˜์‘ํ˜•

๋ฆฌ์•กํŠธ๋กœ ๊ฐ„๋‹จํ•œ ๊ฒŒ์‹œํŒ์„ ๋งŒ๋“ค์–ด๋ณด๊ธฐ๋กœ ํ–ˆ๋‹ค.

์ด ๊ฒŒ์‹œํŒ์— ๋“ค์–ด๊ฐ€๋Š” ๊ธฐ๋Šฅ ์ค‘์— ํ•˜๋‚˜๊ฐ€ ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋“ฑ๋กํŽ˜์ด์ง€๋ฅผ ๋”ฐ๋กœ ๋งŒ๋“ค๊ณ  ๋ฉ”์ธ ํŽ˜์ด์ง€๋ฅผ ๋”ฐ๋กœ ๋งŒ๋“ค์–ด์•ผํ•ด์„œ router์„ ์จ์•ผํ–ˆ๋‹ค.

 

React Router

๋ฆฌ์•กํŠธ๋Š” SPA (Single Page Application) ๋ฐฉ์‹์œผ๋กœ์จ, ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํŽ˜์ด์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ, ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋กœ๋“œํ•˜๋Š” ๊ธฐ์กด์˜ MPA ๋ฐฉ์‹๊ณผ ๋‹ฌ๋ฆฌ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋กœ๋“œํ•˜์ง€ ์•Š๊ณ  ํ•˜๋‚˜์˜ ํŽ˜์ด์ง€ ์•ˆ์—์„œ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ๊ฐ€์ ธ์˜ค๋Š” ํ˜•ํƒœ๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

๊ทธ๋ฆผ์ฒ˜๋Ÿผ ํ•˜๋‚˜์˜ html ํŒŒ์ผ์—์„œ ํšŒ์›์ถ”๊ฐ€ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๊ธฐ ์œ„ํ•ด์„œ ํด๋ฆญ์‹œ html์ด ๋ฐ”๋€Œ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ํšŒ์›์ถ”๊ฐ€.js๋กœ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ Œ๋”๋งํ•ด์˜ค๋Š” ๋ฐฉ์‹์ด SPA์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด๊ฑธ ํ•˜๊ธฐ ์œ„ํ•ด์„œ react-router๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

 

 

 

 

728x90