React 시작하기

React 프로젝트 생성 및 라우터 설정

2019-09-24

Frontend

React 설치하기

$npx create-react-app {프로젝트명}

위 명령어 한 줄로 아주 간단하게 react 프로젝트가 생성되었다.

npm start명령어를 통해 react 프로젝트가 생성된것을 확인할 수 있다.

라우터 설정하기

$npm install --save react-router-dom

위 명령어를 통해 react-router를 설치합니다.

홈과 어바웃 2개의 페이지를 만들기 위해
src 폴더아래 views라는 폴더를 만들었습니다.

그리고 그 안에 home.js, about.js 2개의 컴포넌트를 생성해줍니다.

src/views/home.js

import React from 'react';

const Home = () => {
  return (
      <div>
          hello world home
      </div>
  )
};

export default Home;

이런식으로 2개의 컴포넌트를 생성합니다.

src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Home from './views/home';
import About from './views/about';

function App() {
  return (
    <Router>
        <div>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path='/about' component={About} />
            </Switch>
        </div>
    </Router>
  );
}

export default App;

App.js에서 Route를 import하고 path설정을 해줍니다.

http://localhost:3000, http://localhost:3000/about 를 들어가봅니다.

간단하게 라우터 설정이 끝났습니다.

FrontEnd
React.js