Node.js | React | MongoDB | Express (6)

Node.js | React | MongoDB | Express (6)

1. Create React App 구조 (structure)

npx create-react-app .

create react app명령 후 생기는 폴더와 파일들

실행

client > src > App.js

npm run start
client > src > App.js 이 렌더링 되고있는 것

어디서 렌더링? -> client > src > index.js

ReactDOM.render(
  <React.StrictMode>
    <App />                   // 이 부분, 만약 여기를 div hello로 바꾸면 그게 렌더링됨
  </React.StrictMode>,
  document.getElementById('root')
);

어디서 페이지 표현? -> client > public > index.html

<div id="root"></div>
html div root를 index.js에서 'getElementById'를 통해 신호를 받고
거기에 APP 렌더링을 쏴주는 것

webpack이 관리하는 부분 : src (public X)
img 파일 넣고싶을때는 src에 넣어야 webpack이 묶어주는 역할 해줌

2. Create React App For Boilerplate

= boilerplate를 위한 구조

boiler placte에 특화된 구조 src폴더 내부임!

• _actions | _reducers : Redux를 위한 폴더들
• components > views : 이 안에는 페이지들을 넣음
• components > views > sections : 해당 페이지에 관련된 css파일 & component
• components > App.js : Routing 관련 일 처리
• components > Config.js : 환경변수 지정
• hoc 폴더 (Highter Order Component) : 다른 컴포넌트를 갖는 function
  • Auth(자격체크)라는 HOC가 있을 때 특정 component는 특정한 사람(관리자, 로그인 등) 들어갈 수 있는데, Auth에서 가능한지 체크해줌
• utils : 렌딩 페이지, 로그인, 레지스터 페이지 등등 여러군데 사용되는 경우 나눠서 쓰는 것들을 utils에 넣음

react extension

extension : ES7+ React/Redux/React-Native snippets 다운로드
// react 기본설정 자동생성
rfce  (functional component)
rcc (class component)

각 폴더 및 페이지 생성해주고 view의 경우 페이지마다 js생성해주기

components > views 파일들 rfce

import React from 'react';
function LandingPage() {
  return <div>
    LandingPage
  </div>;
}
export default LandingPage;

3. React Router Dom

링크

Quicstart > WEB > Basic

1) reatc router dom 다운

cd client
npm install react-router-dom --save

2) basic 코드 복사해오기

주의: react router dom import해올때 switch에서 routes로 변경 (v6)

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 path="/" element={<LandingPage />} />
          <Route path="/login" element={<LoginPage />} />
          <Route path="/register" element={<RegisterPage />} />
        </Routes>
      </div>
    </Router>
  );
}
export default App;