[React] 리액트 라우팅, React Router Dom ( useParams, useSearchParams, useNavigate )

Routing

• 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정
• router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 sth
• route + ing : 경로를 정해주는 행위 자체와 그 과정을 다 포함하여 일컫는 말

 

Page Routing

• 브라우저의 요청에 따라 웹 서버가 어떤 페이지를 보여줄 지 결정하는 과정
• MPA multipage Application
  • 여러 html 파일로 이루어진 웹 사이트로, 요청할 때마다 새로운 페이지를 전송
  • 요청할 때마다 새로고침 (페이지 깜빡임)
• SPA single page application
  • 싱글페이지이므로 페이지 이동이 없음
  • CSR client side rendering
    • 서버와의 통신 없이 브라우저 자체적으로 페이지 업데이트 (로딩이 짦음)
    • = 페이지의 일부만 갈아끼우고 url만 변경하여 마치 페이지가 이동하는 것처럼 보임
    • 페이지 변경이 빠르고 쾌적
    • 데이터가 필요한 경우 데이터만 서버와 주고 받음 (json 등)

 

React Router Dom

리액트에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

 

Custom hooks by React-router-dom

Path Variable : useParams

url 파라미터 값을 가져와서 사용

const { id } = useParams();

 

Query String : useSearchParams

별도의 처리 없이 바로 맵핑됨, 페이지 라우팅 경로에 영향 x

const [searchParams, setSearchParams] = useSearchParams();

ex) /url?name=value

 

 

Page Moving : useNavigate

link태그를 쓰지 않고도 페이지 이동이 가능

 const navigate = useNavigate();

navigate(-1) : 뒤로가기

 

 

 

 

* 참고 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의