[코딩온] 웹개발자 풀스택 과정 15주차 회고 | React - React Router

라우팅(Routing)이란?

• 사용자가 요청한URL에 따라 해당URL에 맞는 페이지를 보여주는 것
• 가장 많이 쓰이는 라이브러리? React Router

리액트 라우터(React Router)

• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리
• 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공
• 주요 컴포넌트
  BrowserRouter
  Routes
  Route
  Link
  createBrowserRouter
  

BrowserRouter

• Router의 역할
• 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당
• URL마다 컴포넌트가 바뀔때 이때 바뀌는 부분의 최상단에 위치 해야 한
  다.

Routes, Route

• 경로가 일치하는 컴포넌트를 렌더링 해주도록 경로 매칭
• Route에서는 구체적으로 어떤 컴포넌트를 렌더링할지 결정
  

Link

• 경로를 변경한다
• 기존 HTML의 a 태그가 새로고침해 렌더링을 수행했다면 컴포넌트는 페이지 전환을 방지한다.

URL 파라미터

• useParams()
• /product/:id
• 경로에: 를사용해설정되는것
• URL 파라미터가여러개인경우/product/:id/:name 처럼 설정

URL 쿼리스트링

페이지 이동

참고

[코딩온] 웹개발자 풀스택 과정 15주차 ppt