FE&BE
2020. 10. 25.
[React] ๋ฆฌ์กํธ ๋ผ์ฐํฐ(react-router-dom)๋ก ์ปดํฌ๋ํธ์ ๊ฐ์ฒด ์ ๋ฌํ๊ธฐ
์ค๋์ ๋ฆฌ์กํธ๋ก ๊ฐ๋ฐ ํ ๋ ์์ฃผ ์ฌ์ฉ๋๋ ๋ฆฌ์กํธ ๋ผ์ฐํฐ๋ก ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ ์ ๋ฌํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณผ๊ฒ์! URL์ ์ด์ฉํ param๊ณผ query๋ก ๊ฐ๋จํ ๋ฐ์ดํฐ ์ ๋ฌํ๋ ๋ฐฉ๋ฒ์ ์๊ณ ์์์ง๋ง ๊ฐ์ฒด๋ฅผ ์ ๋ฌํ ์ ์๋ ์๋ก์ด ๋ฐฉ๋ฒ์ ๋ฐ๊ฒฌํด ์ ๊ธฐํด์ ๊ธ๋ก ๋จ๊ฒจ๋ด
๋๋ค ใ
ใ
React์์ Routing์ ํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์๊ฒ ์ง๋ง ์ ๋ ํ์ด์ค๋ถ์์ ์ ๊ณตํด์ฃผ๋ react-router-dom๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด ๊ธ์ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์จ๋ณด์๋ค๋ ๊ฐ์ ํ์ ์์ฑ๋์์ต๋๋ค. ํ์ด์ง ๊ฐ ๋ฐ์ดํฐ ์ ๋ฌ ๋ฐฉ๋ฒ์ ์ ๊ฐ ์ฌ์ฉํด๋ณธ ๋ฐฉ์์ผ๋ก ์ด 3๊ฐ์ง๊ฐ ์์ต๋๋ค Params Query location ๋ด์ state ๋ณ์ โญ๏ธ Params, Query Params์ Query๋ชจ๋ URL์ ์ด์ฉํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํฉ๋๋ค! ..