React를 경험해보자. 2탄

 

✏️React를 경험해보자 2탄

 

1편에서는 간단하게 React 설치에 대해 작성을 해봤다.

이번 편에서는 라우트와, Axios를 경험(사용)해보려고 한다.

 

 

 

- 라우트 사용을 위해 react-router-dom 을 설치해보자

 

npm install react-router-dom --save

 

설치가 완료되었다면, App.js에 react-router-dom을 import하고, 라우팅할 컴포넌트도 같이 import 해준다.

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/login">
            <LoginPage />
          </Route>
          <Route exact path="/register">
            <RegisterPage />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

 

 

그리고 Router안에 Switch, Switch안에 Route, Route안에 Component를 넣어준다. 

아, BrowserRouter, Switch, Route에 대해 먼저 짚고 넘어가야될 것 같다!

 

 

<BrowserRouter> : <BrowserRouter>와 <HashRouter> 가 있는데, BrowserRouter는 History 모드, HashRouter는 Hash 모드라 생각하면 될 것 같다. 

<Switch> : path가 서로 충돌하지 않도록 Route들을 관리하고, path와 매칭되는 Route를 랜더링한다.

<Route exact path='/'....>: exact는 pathname과 정확히 일치하는 Route를 매칭하여 랜더링해준다. 

 

그리고 코드를 보면, 조금 다른 면이 보일거다. 

첫 번째 <Route>는 한줄로 끝나는데, 두 번째, 세 번째는 3줄로 쓰여있다. 

일부러 예시를 들기 위해 코드를 이렇게 작성했다.

 

첫 번째처럼 Route안에 component={ 컴포넌트명 }으로 코드를 작성할 수 있고, / 막음태그를 넣어

한줄로 간략하게 작성할 수 있다.

 

 

훨씬 간결해진 코드

 

 

- Axios를 사용해보자.

 

npm install axios --save

 

설치 후, 나는 랜딩 페이지에서 테스트해보기 위해 axios를 import 해주었다. 

서버 파일에 /hello 로 get을 호출하면 "get hello!" 를 보내주는 get 함수를 추가해뒀다. 

 

import React, { useEffect } from "react";
import axios from "axios";

function LandingPage() {
  useEffect(() => {
    axios.get("http://localhost:5000/hello").then((res) => console.log(res));
  });

  return <div>LandingPage</div>;
}

export default LandingPage;

 

useEffect는 React Hooks에서 제공해주는 함수다. (이 함수는 나중에 더 제대로 공부해볼 예정이다)

우선 마운트될 때, axios.get을 통해서 서버에 만들어둔 get 함수를 호출하게 했다. 결과는? 

 

 

응 안 돼~ 돌아가!

 

cors 에러가 발생한다. 

 

다음 3탄에서는 cors 이슈를 해결하고, http://localhost:5000/hello 이렇게 url 값을 모두 붙여넣지 않아도 

/hello로 호출하더라도 http://localhost:3000/hello가 아닌 http://localhost:5000/hello를 호출하는 방법을 

포스팅해야지.