우리는 웹쇼핑이나 웹게임 등 웹페이지를 이용할 때 전체 홈페이지에서 서브페이지로 넘어 가는 페이지를 대부분 이용할 수 있다. 그러나 리액트는 SPA(싱글페이지애플리케이션)이다. 그러면 리액트로 만든 홈페이지에서 서브페이지로 넘어갈 수 있게 만들려면 어떻게 해야 할까?

React Router

리액트에서 제공하는 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리다. 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트나 홈페이지를 만들수있도록 해준다. 리액트 라우터를 사용하면 손쉽게 리액트 라우터로 싱글 페이지 애플리케이션 (Single Page Application)을 만들 수 있다.

라이브러리 설치

React-Router

위의 링크를 클릭하면 리액트 라우터 튜토리얼 및 설치방법, 적용까지 상세히 나와있다.
먼저 라우터를 적용할 프로젝트를 만들고 터미널을 열어 밑의 코드를 입력했다.

npm install react-router-dom

이런 식으로 나오면 설치가 완료된 것이다.

프로젝트에 라이브러리 적용

프로젝트 app을 브라우저 라우터(React Hook)가 감싸줘야한다. index.js에 들어가서 App을 브라우저라우터가 감싸도록 코드를 수정하고 import 해준다.

이제 리액트 라우터를 통해 여러 페이지로 구성된 웹 애플리케이션을 만들기 위하여 각 페이지에서 사용할 컴포넌트를 만들어야 한다. 나는 쇼핑몰웹을 만든다고 가정하고 초기홈페이지 HomePage와 서브페이지 Aboutpage, 상품페이지 ProductPage, 상품디테일 ProductDetailPage 이렇게 4개의 컴포넌트 만들어 줬다.

• App.js
  
  Routes태그안에 연결할 페이지들을 감싸줘야한다. 연결할 페이지 컴포넌트는 Route태그를 사용하여 path(경로) 와 element(컴포넌트)를 입력해줬다.

• HomePage.js
  
  페이지를 넘어가는 방법엔 두가지가 있다. 먼저 홈페이지(초기화면)에서 About페이지로 넘어가기위해 Link (리액트 라우터 훅)를 사용하였다. 역시 import를 먼저해주고 App.js에서 Aboutpage의 경로를 /about으로 설정했으니 Link to태그안에 해당 경로를 그대로 입력해주면 된다.
  다른 방법으로는 useNavigate를 사용하는 것이다. 홈페이지에서 Productpage로 넘어가기위해 navigate라는 오브젝트를 생성하여 useNavigate('경로')를 넣어주고 버튼을 만들어 onClick이벤트를 주었다.
  

• Aboutpage.js
  
  홈으로 넘어가기위해 useNavigate()를 사용했다.
  

• ProductPage
  
  ?쿼리 뒤에 있는 값은 url 경로에 영향을 미치지 않는다. 하지만 /뒤에 입력한 값을 경로가 아예 틀려져서 바뀌는 것이기 때문에 경로에 영향을 미친다. 그래서 url에서 쿼리를 가져오는 함수 useSearchParams를 사용했다. useState이랑 비슷한 방식으로 사용하고 url주소 뒤에 내가 가져오고 싶은 쿼리 값을 get("page(쿼리값)")으로 가져오면 된다.
  
  

• ProductDetailPage
  
  쇼핑몰페이지에는 여러개의 상품들이 있을 거고 그 상품마다 상세페이지가 있을 것이다. 이 상세페이지를 만든다했을 때 파라미터를 가져오는 방식으로 하였다.
  
  

상품마다 id값을 지정해주어 여러상품의 상세페이지를 보여줄수있다.