리액트 기초 강의 (2) - Create React App & React Router Dom

1. CRA(create-react-app)

 - 원래 리액트 앱을 처음 실행하기 위해서는 babel이나 webpack 같은 것들을 설정하기 위해서 오랜 시간이 걸렸음

     => Babel : 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서,

                       최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜줌

     => Webpack : html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이며,

                              필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 줌

 - but, create-react-app Commnand로 바로 시작할 수 있게 되었음

npx create-react-app .

 - npm/npx란?

     => npm(Node package manager) :  자바스크립트 프로그래밍 언어를 위한 패키지 관리자이고, 

                                                        자바스크립트 런타임 환경 node.js의 기본 패키지 관리자.

                                         즉 자바스크립트로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동화하여 관리해주는 기능

     => npm install : 로컬로 다운을 받아져서 node_modules에 설치가 되고, 

           npm install -g : 다운을 받으면, 글로벌로 다운을 받게 되어 로컬과 빈에 다운이 받아짐 

     => 원래는 create-react-app을 할 때, npm install -g create-react-app 진행하였고, global 디렉토리에 다운을 받았음

     => 현재는, npx를 이용하여, 그냥 create-react-app을 이용할 수 있음.

           이유는 npx가 npm registory에서 create-react-app을 찾아서 다운로드 없이 실행 시켜주기 때문임.

           장점 : Disk Space를 낭비하지 않고, 항상 최신버젼을 사용할 수 있음



여기에 쓰인 파일들은 오직 public/index.html만 쓰일 수 있음

 

 

 

 

 

 

이곳에 JS파일과 CSS 파일들을 넣으면 되고, webpack은 여기에 있는 파일만 봄.

그래서 이 폴더 이외에 넣는 것은 webpack에 의해서 처리되지 않음.

 

 

 

 

 

2. CRA to Our Boilerplate 

     => Bolier Plate에 특성화된 구조

 1)  _actions, _reduce => Redux를 위한 폴더들

 2) components/views => 이 안에는 Page들을 넣음

 3) components/views/Sections => 이 안에는 해당 페이지에 관련된 css 파일이나,

       component들을 넣음

 4) App.js => Routing 관련 일을 처리함

 5) Config.js => 환경변수 같은 것들을 정하는 곳

 6) hoc => Higher Order Component의 약자로 

 7) utils => 여러 군데에서 쓰일 수 있는 것들을 이곳에서 넣어둬서 어디서든 쓸 수 있게 해줌 

Auth(HOC)	-->	ADMIN COMPONENT
여기서 해당 유저가 해당 페이지에 들어갈 자격이 되는지를 알아낸 후에 w 자격이 된다면,  Admin component에 가게 해주고 아니라면 다른페이지로 보내버림		Admin 유저만 들어올 수 있는 곳

 

 - ES7 React/Redux/GraphQL/React-Native snippets 다운 

     => 기본 functional component 하려면 다운 받아서 하면 됨!!

 

 

3. App.js React Router Dom

  - 페이지 이동할 때, React Router Dom이라는 것을 사용함

  - react router dom : SPA에서 화면 전환을 위해 사용하는 모듈 

  - https://v5.reactrouter.com/web/example/basic 사용방법 참조

  - react-router-dom 다운 : npm install react-router-dom --save

  - 사이트 참조해서 App.js 에 복사하여 실행

*** react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원을 안하게 됐음

       Switch -> routes로, component도 element로 바뀜

    => 첨엔 version 5를 참고해서 하다가 오류가 발생하였음. 다들 참고하길 바람

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";


function App() {
  return (
    <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/dashboard">Dashboard</Link>
        </li>
      </ul>

      <hr />

      {/*
        A <Switch> looks through all its children <Route>
        elements and renders the first one whose path
        matches the current URL. Use a <Switch> any time
        you have multiple routes, but you want only one
        of them to render at a time
      */}
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </div>
  </Router>
  );
}

export default App;

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

 

  -  페이지마다 파일을 만들어놔서 링크 부분을 삭제함

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} 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>

      {/*
        A <Switch> looks through all its children <Route>
        elements and renders the first one whose path
        matches the current URL. Use a <Switch> any time
        you have multiple routes, but you want only one
        of them to render at a time
      */}
      <Routes>
        <Route exact path="/" element={<LandingPage />} />
        <Route exact path="/login" element={<LoginPage />} />
        <Route exact path="/register" element={<RegisterPage />} />
      </Routes>
    </div>
  </Router>
  );
}

export default App;

012