React_55_React Router

지원·2023년 11월 20일

React

목록 보기
56/71
post-thumbnail

React Router

리액트 컴포넌트로 페이지를 나누는 라이브러리

리액트 라우터의 핵심 컴포넌트에는
Router
Routes
Route
Link
4가지가 있다.

Router

리액트 라우터에서 사용하는 데이터들을 모두 가지고 있다.
현재 주소라던지 페이지 기록같은 데이터들을 가지고 있다.
이게 없으면 리액트 라우터를 사용할 수 없다.

Context는
props를 거치지 않고 데이터를 넘겨준다.
이때 데이터를 내려줄 범위를 Context Provider컴포넌트로 지정했었다.

Router컴포넌트도 내부적으로는 Context Provider이다.
그래서 리액트 라우터에서 제공하는 기능을 사용하려면
반드시 Router컴포넌트 안에서 사용해야한다.

보통은 최상위 컴포넌트에서 라우터를 감싸며 사용한다.
이렇게 하면 프로젝트 전체에서 리액트 라우터의 기능을 사용할 수 있다.

Routes, Route

이 두 컴포넌트는 주로 같이 사용한다.
Routes컴포넌트 안에서 Route컴포넌트로
페이지의 경로와 보여줄 컴포넌트를 지정하는 것

Link 컴포넌트는 리액트 라우터에서 a태그 대신에 사용하는 것이다.

0개의 댓글