Lami
삶이 온통 사람의 길이니
Lami
전체 방문자
오늘
어제
  • 분류 전체보기 (165)
    • Elice (1)
      • 회고록 (1)
    • Git (0)
    • HTML ▪ CSS (4)
    • JavaScript (7)
      • BOJ (2)
      • Programmers (0)
      • Study Note (5)
    • TypeScript (0)
    • React (21)
      • Lecture (19)
      • Study Note (2)
    • Python (44)
      • CodeUp (38)
      • Programmers (0)
      • Study Note (6)
    • Modern Agile (80)
      • Tech Talk (7)
      • TIL (73)
    • 문제해결 (1)
    • 회고록 (5)
    • 도란도란 (2)

블로그 메뉴

  • Github

공지사항

  • 👋 안녕하세요!

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Lami

삶이 온통 사람의 길이니

React/Lecture

[Kossie Coder] routes 파일 만들기

2022. 1. 16. 22:31
// App.js

import React from 'react';
import './index.css';
import Navbar from './components/Navbar';
🌟import routes from './routes';🌟

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

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <div className="container">
          <Switch>
            🌟{routes.map((route) => {
              return (
                <Route key={route.path} path={route.path} exact>
                  <route.component />
                </Route>
              );
            })}🌟
          </Switch>
        </div>
      </div>
    </Router>
  );
}
export default App;
// routes.js

import Users from './pages/Users';
import Home from './pages/Home';
import Movies from './pages/Movies';

🌟export default [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/movies',
    component: Movies,
  },
  {
    path: '/users',
    component: Users,
  },
];🌟

 

App.js에서 반복적으로 작성했던 코드를 map을 이용한 반복문을 통해 효율적으로 만들었다.

 

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */

'React > Lecture' 카테고리의 다른 글

[Kossie Coder] (완강) user 페이지  (0) 2022.01.22
[Kossie Coder] user 페이지 라우트 추가 - useParams()  (0) 2022.01.21
[Kossie Coder] 로딩 Spinner 추가하기  (0) 2022.01.15
[Kossie Coder] axios  (0) 2022.01.15
[Kossie Coder] NavLink 사용하기  (0) 2022.01.15
    'React/Lecture' 카테고리의 다른 글
    • [Kossie Coder] (완강) user 페이지
    • [Kossie Coder] user 페이지 라우트 추가 - useParams()
    • [Kossie Coder] 로딩 Spinner 추가하기
    • [Kossie Coder] axios
    Lami
    Lami
    성장하는 즐거움을 알아가는 중입니다🌱

    티스토리툴바