[복습용] 리액트 라우터의 사용 ( react router )

라우터는 페이지의 전환을 위하여 사용한다.

a 태그는 페이지를 전환하면서 화면을 새로고침한다. 그러나, 라우터는 페이지를 새로고침하지 않으며 페이지를 전환할 수 있기 때문에 렌더링을 최소화하여 빠르게 화면전환이 가능하다.

(1) 라우터를 설치한다. 라우터를 설치할 프로젝트 상단 폴더에서 터미널을 열고 아래와 같이 명령어를 입력한다. ( 설치 후에는 package.json 파일의 dependencies 에서 설치된 라우터의 버전을 확인할 수 있다. )

npm install react-router-dom

(2) BrowserRouter 는 Routers 로 감싸고, Routers 는 여러 개의 Route 를 감싸는 형태로 사용할 수 있다.

<BrowserRouter>
	<Routes>
		<Route path="/" element={<Main></Main>}></Route>
		<Route path="/About" element={<About></About>}></Route>
        <Route path="/QNA" element={<QNA></QNA>}></Route>
	</Routes>
</BrowserRouter>

• Route 컴포넌트의 path 속성에 페이지의 경로를 지정하고, elememt 속성에 원하는 페이지(컴포넌트)를 지정한다.

<Route path="페이지경로" element={<Component></Component>}></Route>

• Link 컴포넌트는 마치 a 태그와 같은 역할을 하며, 페이지간 전환(이동)을 가능하게 한다. 단, a 링크를 사용하면 페이지의 전환 시 새로고침이 일어나지만 Link 컴포넌트를 이용하면 새로고침이 일어나지 않는다. ( Link 컴포넌트는 BrowserRouter 로 감싸야 한다. )

<BrowserRouter>
  	<Link to="/"> Main 페이지로 이동 </Link>
  	<Link to="/About"> About 페이지로 이동 </Link>
	<Link to="/QNA"> QNA 페이지로 이동 </Link>
	<Routes>
		<Route path="/" element={<Main></Main>}></Route>
		<Route path="/About" element={<About></About>}></Route>
        <Route path="/QNA" element={<QNA></QNA>}></Route>
	</Routes>
</BrowserRouter>