React? SPA?
SPA(single page application->대충 한페이지로 다한다 이런뜻)
방식인 리액트는 안타깝게도 html 파일이 하나밖에없다.
만약 웹사이트를 한페이지밖에못쓴다면 참슬픈일이라고생각한다. 이러한 문제점을 막기위해 리액트는 다양한 URL을통해 페이지를 보여주는데 이거 이동을 쉽게만들어주는게 React Router라고보면된다.
여러페이지를 쉽게이동시키고 보여주기위해 사용하게되는데 보통 최상단 컴포넌트를 BrowserRouter를 통해감싸주고
<Routers, Route>순으로 감싸줘 사용한다.
Routers? Route
Routers는 Route들의모임으로 규칙이일치하는 Route만 렌더링시켜줌
Route는 우리가 말하는 url 당 페이지를 할당해주는역활을합니다
조금더 자세하게 뜯어보면
<Route path="경로" element={}>이런식으로 작성하는데 path에는 url 주소를 집어넣고 {}에는 띄워줄 요소를 적어주면된다.
경로에 대표적인예로 '/' 와 '*' 는 홈화면과, 없는페이지를 나타낸다. 나머지는 알아서..
그럼 url 로 어떻게이동?
간단하게 Link태그를이용해 이동할수있다. 특정버튼 혹은 박스 화면을 클릭하면 link 를통해 이동된다던지
그런식으로 코드많이짬.
근데 navigate사용하는방법도있는데 useNavigate라고 리액트훅인데 라우터쓸때 아주유용하다.(페이지를 쉽게 넘어가게 해주고 또 이전페이지 다음페이지등도 쉽게구현가능하다)
그럼 페이지 다만들꺼야?
일반적인 웹사이트만 상상해봐도 페이지가 수백개일텐데 이거 다 라우터로할껀가 싶다.
그래서 우리는 URL 파라미터를 통해 이시간을 절약할수있다.
<Route path="/product/:productId" element={}>
요런식으로쓰면 product/1,2,3,4,----해서 무한으로 페이지가생성됨
그럼 이요소들을 어떻게 적용하냐 하면 useParams란 훅을사용하면 이 파라미터 밸류에 접근이가능하다.
결론
리액트 라우터는 하나의 html로 먹고사는 리액트에게 구원의길을 줫다.
