본문 바로가기
프론트엔드/React

리액트 React | 리액트 라우터: react-router-dom 패키지

by YUNI Heo 2023. 4. 24.
반응형

 

✅ 라우팅 Routing

https://velog.io/@ez0ez0

라우팅은 사용자가 요청한 URL에 따라 해당 URL에 맞는 컴포넌트를 보여주는 것이다.

사용자가 애플리케이션에서 다른 페이지로 이동하려고 할 때, 라우터를 사용하여 해당 페이지 컴포넌트를 렌더링 한다.

 

✅ 리액트 라우터 React Router

리액트 라우터(React Router)는 리액트 기반의 싱글 페이지 애플리케이션(SPA)에서 라우팅을 구현하기 위한 라이브러리이다.

리액트 자체는 View만을 담당하는 라이브러리로 페이지의 URL에 따라 적절한 컴포넌트를 렌더링 하고 상태를 관리하기 위해 리액트 라우터(React Router)를 사용한다.

 

💡 react-router 패키지

react-router

React 기반의 웹 및 앱 라우팅을 처리하는 라이브러리이다.


react-router-dom

React 기반의 웹 애플리케이션에서 브라우저 라우팅을 담당하는 react-router의 확장 패키지이다.


react-router-native

React Native 기반의 모바일 애플리케이션에서 네이티브 라우팅을 처리하는 react-router의 확장 패키지이다.

 

💡 react-router-dom 패키지

터미널에서 해당 명령어를 입력하여 패키지를 설치한다.

npm install react-router-dom

 

✅ 컴포넌트

💡 Link 컴포넌트

[웹 개발 공부/React] - 리액트 React | Link 컴포넌트

 

리액트 React | Link 컴포넌트

✅ Link 컴포넌트 새로고침을 방지 하기 위해선, 리액트 라우터에 있는 Link 컴포넌트를 사용해야합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을

sugoring-it.tistory.com

반응형