Skip to content

likelion-inha-13/FE-React-Router

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

4 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿฆ ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ 13๊ธฐ React 4๋ฒˆ์งธ ์„ธ์…˜ ๊ณผ์ œ์ž…๋‹ˆ๋‹ค ๐Ÿฆ

React Router๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฐ๊ฒฝ์ƒ‰ ์ „ํ™˜ ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•œ ๊ณผ์ œ์ž…๋‹ˆ๋‹ค.


โญ๏ธ ๊ณผ์ œ ์‹œ์ž‘ ๋ฐฉ๋ฒ•

  • github ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ fork ํ•˜์‹  ๋‹ค์Œ, ๋ณต์ œ๋œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋กœ์ปฌ์— clone ํ•ด์ฃผ์„ธ์š”!
  • ColorPage.jsx / MainPage.jsx / App.jsx ๋งŒ ์ˆ˜์ •ํ•ด์ฃผ์„ธ์š”!

๐Ÿ’ก ๊ณผ์ œ ์„ค๋ช…

์‚ฌ์šฉ์ž๊ฐ€ ํŠน์ • ์ƒ‰์ƒ์„ ํด๋ฆญํ•˜๋ฉด, ํ•ด๋‹น ์ƒ‰์ƒ์˜ ์ด๋ฆ„์ด URL ๊ฒฝ๋กœ์— ๋ฐ˜์˜๋˜๊ณ 
React Router์˜ ๋™์  ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฐฐ๊ฒฝ์ƒ‰์ด ํ•ด๋‹น ์ƒ‰์œผ๋กœ ๋ฐ”๋€Œ๋Š” ํŽ˜์ด์ง€๊ฐ€ ์ถœ๋ ฅ๋ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ์˜ ๋‹ค์„ฏ๊ฐ€์ง€ ์ƒ‰์œผ๋กœ ํŽ˜์ด์ง€ ์ด๋™์„ ํ•ด๋ณด์•„์š” ๐ŸŽจ

red/ blue / pink / orange / yellow

์˜ˆ์‹œ URL:
/color/red โ€”> ๋นจ๊ฐ„์ƒ‰ ๋ฐฐ๊ฒฝ์˜ ํŽ˜์ด์ง€
/color/blue โ€”> ํŒŒ๋ž€์ƒ‰ ๋ฐฐ๊ฒฝ์˜ ํŽ˜์ด์ง€

โœ… ๊ตฌํ˜„ ๋ฐฉ์‹

  • react-router-dom ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ผ์šฐํŒ… ๊ตฌํ˜„
  • :id ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ํ†ตํ•ด URL์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ์ƒ‰์ƒ ๋ Œ๋”๋ง
  • useParams ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ URL์—์„œ ์ƒ‰์ƒ ๊ฐ’ ์ถ”์ถœ
  • useNavigate๋กœ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ํŽ˜์ด์ง€ ์ด๋™ ์ฒ˜๋ฆฌ
  • ์ƒ‰์ƒ ๋ชฉ๋ก์€ MainPage์—์„œ ๋ฐฐ์—ด๋กœ ๊ด€๋ฆฌ

๐Ÿคท๐Ÿปโ€โ™€๏ธ ์ œ์ถœ ๋ฐฉ์‹

  • '๋ณธ์ธ' ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— pull request๋ฅผ ์ƒ์„ฑํ•ด์ฃผ์„ธ์š”!
  • ๋งŒ๋“ค์–ด์ง„ PR ๋งํฌ๋ฅผ Lioz์— ์ œ์ถœํ•ด์ฃผ์„ธ์š” !

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published