React JS_Router 1

#6.0 ~ 6.1

아래 강의 중 'ReacJS로 웹 서비스 만들기'를 보고 배운 것과 모르는 것을 찾아 정리한 내용입니다.

https://academy.nomadcoders.co/courses

Academy

 

 

1. React-Router 준비하기

웹페이지를 interactive(페이지 간 이동이 용이) 하게 만들기 위해서 네비게이션이라는 것을 사용할 것이다. 네비게이션을 사용하기 위해서는 라우터(react-router-dom)라는 것을 써야한다. react-router-dom은 네비게이션 만들어 주는 패키지이다. 리액트에는 라우팅이 내장되어 있지 않기 때문에 따러 설정해야 한다. 일단 설치하자.

npm install react-router-dom

 

라우팅이란 주소에 따라 페이지를 보여주는 것으로, 각각의 페이지가 각각의 다른 주소를 가지도록 하는 것이다. 라우터를 사용하기 위해서는 우선 컴포넌트들의 위치와 라우트들의 위치를 분리시키는 작업이 필요하다. components 폴더와 routes 폴더를 생성하고, components 폴더에 Movie.js, Navigation.js 파일을, routes 폴더에 Home.js, About.js 파일을 각각 생성한다. 생성 이후, src 하위 폴더/파일로 src/components, src/routes, src/App.js, src/index.js 가 있으면 된다.

 

라우터는 url을 가져다가 확인(비교)하고, 우리가 라우터에게 명령한 것에 따라 컴포넌트를 불러온다. App.js에서 라우터를 리턴할 것이며, 이 라우터가 어떤 페이지로 이동해야 하는지 알려줄 것이다. Home.js는 주소에 아무런 path가 없을 때 보여지는 라우트이며, About.js는 주소가 /about일 때 보여지는 라우트이다. 

 

 

2. 라우터 설정하기

라우터를 사용할 때는 Route 컴포넌트를 사용하며, 경로는 path 값으로 설정한다. 아래 코드에서 구조를 살펴보면, 함수형 컴포넌트가 라우터(HashRouter)를 반환하고, HashRouter 안에는 Route가 들어간다. Route 안에는 path와 component 두 개의 props가 있다. Route 안에 여러 개의 path(스크린)를 넣을 수 있으며, path와 component의 이름이 같을 필요는 없다.

//src/App.js
import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import Home from './routes/Home';
import About from './routes/About';
import './App.css';

function App() {
  return (
    <HashRouter>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

export default App;

하지만 위의 코드는 url이 동작하는 방식에 있어 발생하는 문제가 있다. 리액트 라우터는 url을 가져와서 비교한 다음 매치되는 컴포넌트를 렌더링한다. 즉, 위의 코드의 /about url에서는 /와 /about 모두 매치가 되서 Home과 About 컴포넌트를 동시에 렌더링하게 된다.

이를 해결하기 위해서는13번째 줄을 다음과 같이 수정하면 된다.

<Route path="/" exact={true} component={Home} />

exact는 url이 주어진 경로( / )와 정확히 일치할 때만 설정한 컴포넌트(Home)을 렌더링하도록 하는 것이다.

 

추가적으로, 위 코드에서 HashRouter를 사용한 이유는 깃허브 페이지에 업로드할 때 BrowserRouter보다 쉽기 때문이다.