리액트 라우터 사용하기

저번에 만들었던 Todo에 이어서 라우터를 연습하자 

import React, { useState, useCallback, useRef } from "react";
import "./TodoTemplate.css";
import TodoList from "./TodoList";
import TodoInsert from "./TodoInsert";
import styled from "styled-components";

const TodoTemplateBlock = styled.div`
  display:flex;
  width:768px;
  margin: 0 auto;
  margin-top: 100px;
  @media screen and (max-width:768px){
    width:100%;
  }
`


const TodoListBlock = styled.div`
  background: rgb(241, 241, 241);
  min-height: 10rem;
  max-height: 16rem;
  overflow-y: auto;
`;

const TodoTemplate = () => {
  const [todos, setTodos] = useState([
    {
      id: 1,
      contents: "리액트 연습",
      check: false
    },
    {
      id: 2,
      contents: "todolist",
      check: false
    },
    {
      id: 3,
      contents: "spa 라우터 공부",
      check: false
    }
  ]);

  let nextId = useRef(4);

  const insert = useCallback(contents => {
    const todo = {
      id: nextId.current,
      contents,
      check: false
    };
    setTodos(todos => todos.concat(todo));
    nextId.current += 1;
  }, []);

  const remove = useCallback(id => {
    setTodos(todos => todos.filter(todo => todo.id !== id));
  }, []);

  const success = useCallback(id => {
    setTodos(todos =>
      todos.map(todo =>
        todo.id !== id ? todo : { ...todo, check: !todo.check }
      )
    );
  }, []);

  return (
    <TodoTemplateBlock>
      <div className="todoTemplate">
        <div className="todoTemplate div">오늘 할 일</div>
        <div>
          <TodoInsert insert={insert} />
          <TodoListBlock>
            <TodoList todos={todos} remove={remove} success={success} />
          </TodoListBlock>
        </div>
      </div>
    </TodoTemplateBlock>
  );
};

export default TodoTemplate;

 

App.js에서 설정하던 것을 TodoTemplate.js로 옮겨왔다.

 

위에서 styled는 템플릿리터럴로 작성하면서 css를 적용할 수 있다. ( CSS-in-JS 방법론 )  

$ yarn add styled-components

 

css가 중간중간 바뀐다.

 

 

이렇게 나온다. 이상태에서 라우터를 적용해볼것이다

 

$ yarn add react-router-dom

 

터미널에 명령어를 작성하고 설치한다.

 

app.js에서 다음과 같이 작성한다.

 

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));

serviceWorker.unregister();

 

3번째 줄에서 라우터를 가져왔다.

BrowserRouter 넣어주면 라우터를 사용할 준비가 된 것이다.  이 작업은 URL과 동기화하여 UI를 유지시켜준다.

 

이제 Home 컴포넌트를 만든다.

 

import React from "react";
import { Link } from "react-router-dom";
import "./HomeTemplate.css";

const HomeTemplate = () => {
  return (
    <div className="homeTemplate">
      <h1>홈화면</h1>
      <div>
        <Link to="/todo">게스트로 가기</Link>
      </div>
    </div>
  );
};

export default HomeTemplate;

 

App.js를 고친다.

import React from "react";
import "./App.css";
import TodoTemplate from "./components/Todo/TodoTemplate";
import HomeTemplate from "./components/home/HomeTemplate";
import { Route ,NavLink } from "react-router-dom";
import styled from "styled-components";

const HeaderBlock = styled.div`
  display: flex;
  width:768px;
  margin: 0 auto;
  font-weight:800;
  border-bottom: 1px solid black;
  @media screen and (max-width: 768px){
    width :100%;
  }
`;

const Category = styled(NavLink)`
  text-decoration: none;
  white-space: pre;
  color: inherit;

  &:hover{
    color: rgb(101, 173, 255);
  }

  & + & {
    margin-left: 1rem;
  }
`;

const categories = [
  {
    name: "home",
    path: ""
  },
  {
    name: "todo",
    path: "todo"
  }
];

const App = () => {
  return (
    <div>
      <HeaderBlock>
        {categories.map(category => (
          <Category 
          key={category.name} 
          to={`/${category.path}`}>
            {category.name}
          </Category>
        ))}
      </HeaderBlock>
      <Route path="/" component={HomeTemplate} exact={true} />
      <Route path="/todo" component={TodoTemplate} />
    </div>
  );
};

export default App;

 

path는 경로를 말해주는 것이다. exact true (기본값 true) 하게 된다면 화면에서 두 개의 컴포넌트가 나오지 않게 해 준다. 경로가( / <= 중복 )같아서 컴포넌트가 나오게 되는 것인데 이것을 막아준다

 

 

이런 식으로 위에 나타나면 각각을 클릭하면 화면이 바뀌는 것을 볼 수 있다. 이렇게 라우터를 이용하면 프런트단에서 화면 전환이 된다.

 

이밖에도 많은 것들이 있는데 전부 리액트 라우터에서 알아볼 수 있다

 

React Router: Declarative Routing for React