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์ ์ ์ถํด์ฃผ์ธ์ !