React-Router-Dom

kingyong9169·2021년 5월 13일
0

React.js

목록 보기
5/7
post-thumbnail

React-Router-Dom이란

사용자가 주소로 접속했을 때 주소를 알아내서 그것에 해당하는 component를 render하고 state를 관리하기 위해 state, props를 복잡하게 사용해야 한다. 하지만 아주 힘든 작업이지만 이 작업들을 쉽게 만들어 주는 것이 react-router-dom이다.

시작

npm install react-router-dom
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
  1. BrowseRouter는 어떤 path에도 root페이지에 있는 html을 서비스 할 수 있다면 사용
  2. 만약 그게 안된다면 즉 , 특정 path에서는 그럴 수 없다면 HashRouter 사용
	  <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <Route exact path="/"><Home></Home></Route>
      <Route path="/topics"><Topics></Topics></Route>
      <Route path="/contact"><Contact></Contact></Route>
  1. exact path를 통해 정확히 path="/"와 일치하는 것만 출력한다. 만약 exact를 사용하지 않는다면 contact path에 들어왔을 때, Home, Contact component 두 개가 모두 출력된다.
  2. 사용자가 /topics url에 들어오면 path=/topics인 component를 보여준다. 이것이 Route component의 기능

Switch component

      <Switch>
        <Route path="/"><Home></Home></Route>
        <Route path="/topics"><Topics></Topics></Route>
        <Route path="/contact"><Contact></Contact></Route>
      </Switch>
  1. Switch 안에 있는 하나의 component만 출력. Switch가 첫 번째 path="/"를 발견하면 이 component만 화면에 표시하고 다른 component를 무시함. 따라서 contact, topics path로 접근해도 이 component를 출력하지 못한다. 즉, 제일 먼저 걸리는 component만 출력하고 나머지는 버린다.
  2. 따라서 path에 공통되는 부분이 있는 path="/"는 마지막에 위치시킨다.
    만약 switch가 없다면 일치하는 모든 component를 출력한다.
	    <Route exact path="/"><Home></Home></Route>
        <Route path="/topics"><Topics></Topics></Route>
        <Route path="/contact"><Contact></Contact></Route>
        <Route path="/">Not found!</Route>
  1. not found를 출력하고 싶다면 위와 같이 exact path로 설정하고 Home, Topics, Contact와 일치하지 않는 component들은 Not found가 출력되게끔 구현한다.

위에서 보면 Home, Contact, Topics 를 클릭하면 새로운 페이지가 reload된다. 하지만 같은 페이지에서 component만 바뀌게 동적으로 load하려면 Link를 import해주고 a hrefLink to로 바꾸면 끝나는 일이다.

사용자가 클릭한 link에 class="active"로 표시
사용자가 현재 자신이 어떤 페이지에 위치하고 있는지 직관적으로 표기 가능

.active{
  background-color: tomato;
  text-decoration: none;
}

위와 같이 css파일에서 사용자가 클릭한 active클래스의 스타일을 추가해준다.

Nested Router

        <Route path="/topics/1">
          HTML is ...
        </Route>
        <Route path="/topics/2">
          JS is ...
        </Route>
        <Route path="/topics/3">
          React is ...
        </Route>

위와 같이 라우터 안에 라우터 또한 가능하다.

Parameter

<Route path="/topics/:topic_id">

위 코드를 통해 일일이 /topic/1, 2, 3를 쓰지 않고 자동으로 1, 2, 3에 해당하는 페이지로 가도록 해준다.
1. 저 topic_id값을 가져오려면 Hooks의 일종인 useParams를 사용하는데
var params = useParams();를 사용하여 contents[i].id===params.topic_id 이면 해당하는 컨텐츠를 출력해주면 된다.

profile
Learn, feel and put into action.

0개의 댓글