학습목표

• 리액트 Route 문법을 이용하고 사용할 수 있다.
• axios를 사용하여 API를 호출할 수 있다.

React Router

Routing

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
• 리액트에 있는 많은 라우팅 관련 라이브러리 중 React Router를 가장 많이 사용

<aside> 💡 SPA (Single Page Application) : 새로운 페이지를 로드하지 않고 한 페이지 내에서 필요한 데이터만 가져오는 형태 → 리액트는 SPA 방식

</aside>

React Router

• 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리
• 사용자가 입력한 주소를 감지하는 역할
• 여러 종류의 컴포넌트 제공
  • BrowserRouter : HTML5를 지원하는 브라우저의 주소 감지
  • HashRouter : 해시 주소 감지

사용예시

1. <BrowserRouter> 컴포넌트 사용하기
   • 코드
2. <Routes>, <Route> 컴포넌트 사용하기
   • <Routes> : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만 렌더링
   • <Route> : path속성에 경로, element속성에 컴포넌트를 넣어줌
     • 여러 라우팅을 매칭하고 싶으면 URL 뒤에 * 사용
     • “/”로 접근시 메인페이지(Main.js) 보여줌
     • “/product/상품번호”로 접근시 상품상세페이지(Product.js) 보여줌
3. <Link> 컴포넌트 사용하기

   • <a> 태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 X

   • <Link> 컴포넌트는 History API를 통해 브라우저 주소의 경로만 바꿈

     <Link to=”경로”>링크명</Link>
     

   • 코드

4. 정의하지 않은 경로로 접근하는 경우 NotFound 페이지로 이동 처리
   • 코드