섹션 3. React Router로 페이지 추가하기

15 React Router 설치

 

16 React Router - Switch & exact

 

17 NavBar 스타일

import { useState } from 'react';
import axios from 'axios';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';

function App() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const onSubmit = () => {
    axios.post('http://localhost:3001/posts', {
      title: title,
      body: body
    })
  };

  return (
    <Router>
      <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
          <Link class="navbar-brand" to="/">
            Home
          </Link>
          <ul class="navbar-nav">
            <li class="nav-item">
              <Link class="nav-link active" aria-current="page" to="/blogs">
                Blogs
              </Link>
            </li>
          </ul>
        </div>
      </nav>
      <Switch>
        <Route path="/" exact>Home Page</Route>
        <Route path="/blogs">
          <div className="container">
            <h1>Create a blog post</h1>
          <div className="mb-3">
            <label className="form-label">Title</label>
            <input 
            className="form-control" 
            value={title}
            onChange={ (e) => {
              setTitle(e.target.value);  
            } }
            />
          </div>

          <div className="mb-3">
            <label class Name="form-label">Body</label>
            <textarea 
            className="form-control" 
            value={body}
            onChange={ (e) => {
              setBody(e.target.value);
            } }
            />
          </div>

          <button 
            className="btn btn-primary"
            onClick={onSubmit}
          >
            Post
          </button>

          </div>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

 

 

 

18 생성 Form 컴포넌트로 빼내기

컴포넌트로 빼내면 재사용할 수 있어서 좋다.

 

폴더 - 파일을 만들고

 

BlogForm.js

import { useState } from 'react';
import axios from 'axios';

const BlogForm = () => {
    const [title, setTitle] = useState('');
    const [body, setBody] = useState('');
    const onSubmit = () => {
        axios.post('http://localhost:3001/posts', {
            title: title,
            body: body
        })
    };

    return (
        <div className="container">
            <h1>Create a blog post</h1>
            <div className="mb-3">
            <label className="form-label">Title</label>
            <input 
                className="form-control" 
                value={title}
                onChange={ (e) => {
                setTitle(e.target.value);  
                } }
            />
        </div>

        <div className="mb-3">
            <label class Name="form-label">Body</label>
            <textarea 
                className="form-control" 
                value={body}
                onChange={ (e) => {
                setBody(e.target.value);
                } }
            />
        </div>

        <button 
            className="btn btn-primary"
            onClick={onSubmit}
        >
        Post
        </button>

        </div>
    );
};

export default BlogForm;

파일을 만든 다음

 

App.js에서 

import BlogForm from './components/BlogForm';

        <Route path="/blogs">
          <BlogForm />
        </Route>

로 사용!

 

 

19 NavBar 컴포넌트로 빼내기

 

NavBar.js

import { Link } from 'react-router-dom';

const NavBar = () => {
    return (
        <nav className="navbar navbar-dark bg-dark">
            <div className="container-fluid">
                <Link className="navbar-brand" to="/">
                    Home
                </Link>
                <ul className="navbar-nav">
                    <li className="nav-item">
                        <Link className="nav-link active" aria-current="page" to="/blogs">
                            Blogs
                        </Link>
                    </li>
                </ul>
            </div>
        </nav>
    );
};

export default NavBar;

 

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';

import BlogForm from './components/BlogForm';
import NavBar from './components/NavBar';

function App() {

  return (
    <Router>
      <NavBar />
      <div className="container">
        <Switch>
          <Route path="/" exact>
            Home Page
          </Route>
          <Route path="/blogs">
            <BlogForm />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

 

=> 훨씬 간결해짐 !

 

 

20 페이지 추가

 

pages 폴더 - 파일 (오타: -> HomePage.js ㅠㅠ)

 

const HomePage = () => {
    return (
        <div>Home Page</div>
    );
};

export default HomePage;

 

import BlogForm from '../components/BlogForm';

const CreatePage = () => {
    return (
        <div>
            <BlogForm />
        </div>
    );
};

export default CreatePage;

 

const EditPage = () => {
    return (
        <div>Edit Page</div>
    );
};

export default EditPage;

 

const ListPage = () => {
    return (
        <div>List Page</div>
    );
};

export default ListPage;

 

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';

import NavBar from './components/NavBar';
import HomePage from './pages/HomePage';
import CreatePage from './pages/CreatePage';
import EditPage from './pages/EditPage';
import ListPage from './pages/ListPage';

function App() {

  return (
    <Router>
      <NavBar />
      <div className="container">
        <Switch>
          <Route path="/" exact>
            <HomePage />
          </Route>
          <Route path="/blogs" exact>
            <ListPage />
          </Route>
          <Route path="/blogs/create" exact>
            <CreatePage />
          </Route>
          <Route path="/blogs/edit" exact>
            <EditPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

 

 

(Optional) 자바스크립트 map  함수

2배가 되는 배열 만들기

map 함수 이용

더 간단하게

index도 받아와서 index 리턴

배열 안에 숫자가 아니라 객체여도 가능. name이 삭제된 것을 볼 수 O

 

 

21 routes 파일 만들기

 

중복되는 거 없애보자..

function App() {

  return (
    <Router>
      <NavBar />
      <div className="container">
        <Switch>
          {[  // 중괄호 쓰면 변수나 객체 사용 가능
            <Route path="/" exact>
              <HomePage />
            </Route>,
            <Route path="/blogs" exact>
              <ListPage />
            </Route>,
            <Route path="/blogs/create" exact>
              <CreatePage />
            </Route>,
            <Route path="/blogs/edit" exact>
              <EditPage />
            </Route> // 라우트를 하나의 아이템으로 해서 배열에 넣어보자
          ]}
        </Switch>
      </div>
    </Router>
  );
}

 

import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';

import NavBar from './components/NavBar';
import HomePage from './pages/HomePage';
import CreatePage from './pages/CreatePage';
import EditPage from './pages/EditPage';
import ListPage from './pages/ListPage';

const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/blogs',
    component: ListPage
  },
  {
    path: '/blogs/create',
    component: CreatePage
  },
  {
    path: '/blogs/edit',
    component: EditPage
  }
];

function App() {

  return (
    <Router>
      <NavBar />
      <div className="container">
        <Switch>
          {routes.map((route) => {
            return <Route exact path={route.path} component={route.component} />
          })}
        </Switch>
      </div>
    </Router>
  );
}

export default App;

 

 

routes.js

import HomePage from './pages/HomePage';
import CreatePage from './pages/CreatePage';
import EditPage from './pages/EditPage';
import ListPage from './pages/ListPage';

const routes = [
    {
        path: '/',
        component: HomePage
    },
    {
        path: '/blogs',
        component: ListPage
    },
    {
        path: '/blogs/create',
        component: CreatePage
    },
    {
        path: '/blogs/edit',
        component: EditPage
    }
];

export default routes;

 

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';

import NavBar from './components/NavBar';
import routes from './routes';

function App() {

  return (
    <Router>
      <NavBar />
      <div className="container">
        <Switch>
          {routes.map((route) => {
            return <Route exact path={route.path} component={route.component} />
          })}
        </Switch>
      </div>
    </Router>
  );
}

export default App;

 

 

 

22 NavLink

 

NavBar.js

import { Link, NavLink } from 'react-router-dom';

const NavBar = () => {
    return (
        <nav className="navbar navbar-dark bg-dark">
            <div className="container-fluid">
                <Link className="navbar-brand" to="/">
                    Home
                </Link>
                <ul className="navbar-nav">
                    <li className="nav-item">
                        <NavLink
                            activeClassName="active"
                            className="nav-link" 
                            aria-current="page" 
                            to="/blogs"
                        >
                            Blogs
                        </NavLink>
                    </li>
                </ul>
            </div>
        </nav>
    );
};

export default NavBar;

 

Blog 연하게

 

 

(Optional) React Router 작동 원리