MERN 기본파일 만들기 - 9) react app, axios, router-dom 사용하기

리얼돔은 하나만 변경해도 전체를 다시 다 로드한다. 

virtual dom은 하나만 다시 로드해서 더 빠르다. 

스냅샷을 찍으놓은 것을 virtual 돔이 차이를 분석해서 바뀐 부분만 realdom에서 변경해준다.

 

 

 

리액트앱을 사용해보자. 

여기서 webpack은 public폴더는 관리하지 않고 src 폴더만 관리한다. 

따라서 사용하고 싶은 이미지등의 파일들은 모두 src폴더에 넣어주어야 한다. 

 

 

 

여기서 npm 과 npx는 다음과 같다. 

npm은 레지스트리(dependency 담고 있고 파일 빌드기능도 포함한다.)이다.

npm install -g 은 컴퓨터 bin폴더에 전체적으로 생성된다.(global)

 

 

 

react app을 만드는 것은 다음링크에서 잘 나와있다. 

https://github.com/facebook/create-react-app

facebook/create-react-app

 

 

 

 

 클라이언트 폴더와 서버 폴더를 생성해준다. 

저번시간까지 한 config, middleware, models폴더와 index.js파일을 server폴더에 넣어주자.

 

 

 

 

우리는 client 폴더에 리액트 앱을 만들 것 이므로, 

cd client를 이용해서 폴더이동 후 npx create-react-app .을 실행해준다.

만약이런 오류가 난다면 

이 파일을 설치해준다.

 

 

create-react-app의 구조를 보자 .

 

 

 

다음과 같은 폴더와 파일이 생성됐을 것이다.

app.test.js, 

logo.svg,

app.css

는 불필요한 파일이므로 삭제해주고, 

app.js는 src 내부의 component 폴더를 생성해서 이동시켜준다.

 

원래의 구조

우리가 만들고자 하는 구조

hoc는 다른 component를 가지는 component(자격에 따라 들어올수 있는 여부가 갈린다)

사진과 같이 폴더와 파일들을 만들어준다. 

 

 

 

 

여기서 오류가 발생한다면 node_module안의 파일들이 삭제한 파일과 연관이 있기 때문이므로 삭제했다가 다시 설치해주어야 한다. 

rm -rf node_modules를 해서 폴더를 삭제해주고 

npm install을 이용해서 다시 설치해준다.

 

 

 

여태까지는 postman을 이용해서 정보를 업데이트 하고 이동했는데, 

이제는 axios를 통해서 홈페이지를 이동할 수 있도록 바꾼다. 

axios는 다음의 사이트에서 정보를 확인할 수 있다. 

https://github.com/axios/axios

axios/axios

cd client 후 

npm install axios --save를 해준다. 

 

 

 

index.js는 다음과 같이 App을 이용해서 보여주므로

 

App.js안에 router를 작성하도록 한다. 

 

 

 

router를 작성할 때 router-dom을 사용하는데, 사용법은 다음의 사이트에서 확인이 가능하다. 

https://reactrouter.com/web/guides/quick-start

React Router: Declarative Routing for React

 

client에서 npm install router-router-dom --save를 해준다.  

 

 

https://reactrouter.com/web/guides/primary-components

React Router: Declarative Routing for React

 

그 다음  사이트에서 볼 수 있듯이 

import { BrowserRouter, Route, Link } from "react-router-dom"; 을 사용할 것이다 .

 

 

그 다음 index.js파일에 가서 다음과 같이 수정해준다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render(
 <BrowserRouter>
    <App />
  </BrowserRouter>,
  , document.getElementById('root') //퍼블릭 폴더의 index.html에 설정되어 있다. (id = 'root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

컴포넌트 폴더에 다음과 같은 about, RegisterLogin폴더와 각각의 파일들을 만들어 주고 

 

 

App.js파일은 다음과 같이 해준다. 

import React from 'react';
import {Route, Switch} from "react-router-dom";
import About from "./about"//index.js가 기본이기 때문에 굳이 타이핑하지 않아도 된다.
import LoginPage from './components/views/RegisterLogin/LoginPage';
import RegisterPage from "./components/views/RegisterLogin/RegisterPage";
import LandingPage from "./components/views/LandingPage/LandingPage";


function App() {
  return (
    <div >
      <Switch>
        {/* <Route path="/" component={Home} /> */}
        <Route path = "/about" component={About}/>
        <Route path = "/login" component={Login}/>
        <Route path = "/register" component={Register}/>

      </Switch>
    </div>
  );
}

export default App;

 

about>index.js

import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
            <div>
                this is about page
            </div>
        )
    }
}