[React JS] 2. React.js

1. 리액트란?

- 페이스북에서 만든 라이브러리 (2013)- Components로 이뤄져있어 reusable / 재사용성이 뛰어남 ex) like기능, comment.js 를 다른 데서 사용가능!

Real DOM VS Virtual DOMReal DOM - 만약 10개의 리스트 중 한가지의 리스트만 update 됨- 전체 리스트를 다시 reload 해야됨 -> super expensive

Virtual DOM- 만약 10개의 리스트가 중 한가지의 리스트만 update 됨- 그 바뀐 한가지 아이템만 DOM에서 바꿔줌

어떻게? -> virtual dom에서 스냅샷 찍어두고 살펴본 뒤 바뀐 부분만 real dom에서 바꿔줌

2. Create React App으로 리액트 시작하기

- 원래 babel(최신 자바스크립트 문법 지원하지 않는 부라우저에서 최신 자바스크립트 문법을 볼 수 있게 변환시켜줌)이나 webpack(웹사이트 만들때 라이브러리, 프레임워크들을 번들=묶어주는 역할 = 많은 모듈들을 간단하게 만들어줌)

cd client

npx create-react-app .

dot : client 안에다 설치한다는 의미

3. npm npx

npm(node package manager)

1) 오픈소스 라이브러리를 담고있는 online repository

2) version management, dendency management 를 위한 command-line utility

local VS globally

로컬에 받을땐 node_modules에 받아짐

-g 플래그 주면 프로젝트 안이 아니라 컴퓨터 자체에 받아지는 것

npx

- 원래는 create app 사용할 때 컴퓨터에 받았지만 npx를 통해 npm registry에서 찾아서 다운로드 없이 실행

- 장점 : disk space 낭비 X & 항상 최신버전 사용 가능

4. 구조 설명

App.js

- 여기서 페이지 렌더링

index.js

- 여기 안에 App 컴포넌트가 들어간것

- document.getElementById (index.html 의 root에 보여줄 것을 정의해주는 것)

webpack이 src만 관리해줌 -> src부분에 이미지 파일을 넣어줘야함! (public이 아니라)

5. CRA to Our Boilerplate

hoc : 컴포넌트안에 다른 컴포넌트를 갖는 function

ex) Auth(HOC)가 있고 Admin Component가 있을 때 Auth 컴포넌트에서 해당 컴포넌트 접근 가능 여부 체크

6. React Router Dom

App.js에 router 만들기

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

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

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

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

function Users() {
  return <h2>Users</h2>;
}



function App() {
  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>

        <hr />
        {/* A <Switch> looks through its children <Route>s and
          renders the first one that matches the current URL. */}
        <Routes>
          <Route path="/about" element={About()}>
            <Route />
          </Route>
          <Route path="/users" element={Users()}>
            <Route />
          </Route>
          <Route path="/" element={Home()}>
            <Route />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

7. Flow & Axios

요청 보낼때 Axios를 통해 보냄 (Ajax 같은 것)

cd client
npm install axios --save

server

// 프론트에 해당 메시지 전달
app.get("/api/hello", (req, res) => {
  res.send("안녕하세요");
});

client

function LandingPage() {
  // api 서버로 보내고 (index.js)
  useEffect(() => {
    axios.get("/api/hello").then((response) => console.log(response.date));
  }, []);
  return <div>LandingPage</div>;
}

8. CORS이슈, Proxy 설정

CORS : Cross-Origin Resource Sharing

* 다른 포트를 가지고있는 두 서버 사이 아무 설정없이 request 보낼 수 없게 막은 것

proxy 모듈 다운

cd client
npm install http-proxy-middleware --save

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
      createProxyMiddleware('/api', {
          target: 'http://localhost:5000/',
          changeOrigin: true
      })
  )
};

9. Concurrently

프론트/백 서버 동시에 켜기 위해

npm install concurrently --save

package.json script에 추가

"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""

10. CSS Framework 종류 for React.js

Ant Design: https://ant.design/

cd client
npm install antd --save

npm install antd@^4.24.0 --save

11. Redux

Redux : 상태 관리 라이브러리 (predictable state container)

state?

Props VS State

1) Props (properties)

- 컴포넌트 단끼리 주고받을때 prop 활용

- 부모에서 자식 컴포넌트에만 보낼 수 있음

- 부모에서 자식으로 건내받은 값은 바뀔 수 없음 (다시 부모에서 자식에게 건내줘야 바뀜)

- immutable

<ChatMessages
  messages={messages}
  currentMember={member}
/>

2) State

- 컴포넌트 안에서 데이터 교환

- 값 바뀌면 리랜더링 됨

- mutable

state = {
  message: '',
  attachFile: undefined,
  openMenu: false
}

-> redux는 state를 관리

- 한방향으로만 흐름

1)Action

- 객체

- 무엇이 일어났는지 설명

{ type: 'LIKE_ARTICLE', articleId: 42 }

2)Reducer

- action으로 인해 이전 state과 변해진 state 리턴

(previousState, action) => nextState

3)Store

- 어플리케이션 state을 감싸주는 역할

- 여러가지 메서드 있음

Setting Up Redux

cd client
npm install redux react-redux redux-promise redux-thunk --save

* redux-promise & redux-thunk

- 미들웨어

- 필요한 이유

> 리덕스를 잘 쓸 수 있게 도와주는 역할

> redux store의 state를 변경하는 방법이 dispatch(action)

-> action은 객체 형식이어야함

-> store는 promise/function 형태로 받을 때도 있기 때문에

-> promise는 promise 대처하는 법 알려줌

-> thunk는 dispatch에 function 받는 법 알려주는 것

client src index.js

import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promis";
import ReduxThunk from "redux-thunk";
import Reducer from './_reducers';
import "antd/dist/antd.css";

const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  ReduxThunk
)(createStore);

root.render(
  <Provider
    store={createStoreWithMiddleware(
      Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <App />
  </Provider>
);

_reducers 폴더에 index.js 추가

import { combineReducers } from "redux";
//import user from "./user_reducer";

const rootReducer = combineReducers({});

export default rootReducer;

combineReducers

- store가 있는데 안에 여러가지 reducers 있음 (reducer 하는 일이 state가 어떻게 변하는지 보여주고 변한 마지막 값을 return하는 역할)

- combineReducers 이용해서 나눠진 rootReducer로 하나로 합쳐주는 역할

chrome extension - Redux Dev Tools 다운

12. React Hooks

React Component

1) Class Component

- 더 많은 기능 사용 가능

- 코드가 길어지고 복잡해짐

- 성능 느려짐

2) Functional Component

- 제공 기능 한정됨

- 코드가 간단해짐

- 성능이 빨라짐

Functional Component에서 못쓰는 기능

리액트 생성 순서

- constructor 실행 (state 부여)

- render (DOM에 알맞게 넣어서 랜더링)

- ComponentMount 통해서 데이터 가져옴

ㄴ 위 기능들을 원래 못썼음

*HTML DOM

React Hooks update (16.8v 이상)

-> functional component에서 라이프 사이클 / state 부여 다 사용 가능

비교

hook이 나오면서 useEffect로 라이프스타일 사용가능 (최신 hook 많이 씀)

13. LoginPage 만들기 & RegisterPage 만들기

LoginPage.js

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { loginUser } from "../../../_actions/user_action";
import { useNavigate } from "react-router-dom";

function LoginPage() {
  const dispatch = useDispatch();

  const navigate = useNavigate();

  // Email state을
  const [Email, setEmail] = useState("");
  const [Password, setPassword] = useState("");

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value);
  };

  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value);
  };

  const onSubmitHandler = (event) => {
    // 로그인 버튼 누르면 이 함수에서 해야할 일을 하지 않고 페이지가 리프레시 되는 것을 방지하기 위해서
    event.preventDefault();

    let body = {
      email: Email,
      password: Password,
    };

    // dispatch 이용해서 action취하고 그 다음에 reducer 라이프 사이클 돌게하는 것
    dispatch(loginUser(body)).then((response) => {
      if (response.payload.loginSuccess) {
        navigate("/");
      } else {
        alert("Error");
      }
    });
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh",
      }}
      onSubmit={onSubmitHandler}
    >
      <form style={{ display: "flex", flexDirection: "column" }}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />
        <br />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default LoginPage;

_actions > user_action.js

import axios from "axios";
import { LOGIN_USER } from "./types";

export function loginUser(dataTosubmit) {
  const request = axios
    .post("/api/users/login", dataTosubmit)
    .then((response) => response.data);

  return {
    // request를 reduce에 넘겨주는 작업
    type: LOGIN_USER,
    payload: request,
  };
}

_actions > types

export const LOGIN_USER = "login_user";

_reducers > user_reducer.js

import { LOGIN_USER } from "../_actions/types";

// reduce는 previousState + action = NextState만드는 역할
export default function userReducer(state = {}, action) {
  switch (action.type) {
    case LOGIN_USER:
      // state를 똑같이 가져오고
      // ... spread operator = 똑같이 가져오는 것, 빈 상태
      return { ...state, loginSuccess: action.payload };

    default:
      return state;
  }
}

_reducers > index.js

import { combineReducers } from "redux";
import user from "./user_reducer";

const rootReducer = combineReducers({
  user,
});

export default rootReducer;

* RegisterPage 역시 동일한 방식

14. Log out 기능 만들기

LandingPage.js

import React, { useEffect } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

function LandingPage() {
  // api 서버로 보내고 (index.js)
  const navigate = useNavigate();

  useEffect(() => {
    axios.get("/api/hello").then((response) => console.log(response.date));
  }, []);

  const onClickHandler = () => {
    axios.get("/api/users/logout").then((response) => {
      if (response.data.success) {
        navigate("/login");
      } else {
        alert("failed logout");
      }
    });
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh",
      }}
    >
      <h2>시작페이지</h2>
      <button onClick={onClickHandler}>로그아웃</button>
    </div>
  );
}

export default LandingPage;

15. Authentication

HOC (higher order component)

const EnhancedComponent = higherOrderComponent(WrappedComponent);

- 다른 컴포넌트를 받은 후 새로운 컴포넌트 리턴하는 function

- Auth(HOC)에 다른 컴포넌트 집어넣을 수 있음

- Auth에 LandingPage를 넣으면

-> Auth가 backend에 request를 날림

-> 현재 LandingPage 들어와있는 사람의 상태정보를 서버에서 Auth로 보냄

-> Auth가 요청 날리면서 상태 가져와서 access Authentication 확인

hoc> auth.js

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { auth } from "../_actions/user_action";
import { useNavigate } from "react-router-dom";

// specificComponent = Page
// option
// null : 아무나 출입 가능한 페이지
// true : 로그인한 유저만 출입 가능한 페이지
// false : 로그인한 유저는 출입 불가능한 페이지
export default function (SpecificComponent, option, adminRoute = null) {
  function AuthenticationCheck(props) {
    const dispatch = useDispatch();
    const navigate = useNavigate();

    // 백엔드에 request 날려서 사람의 state 가져옴
    useEffect(() => {
      // 페이지 이동할때마다 dispatch작동해서 backend에 request를 주는 것
      dispatch(auth()).then((response) => {
        console.log(response);

        // 로그인 하지 않은 상태
        if(!response.payload.isAuth){
          //true인경우 
          if(option){
            navigate("/login");
          }
        }else{
          //로그인 한 상태
          // 어드민 페이지인데 && isAdmin이  아닌경우
          if(adminRoute && !response.payload.isAdmin){
            navigate("/");
          }else{
            // false일 때
            if(!option){
              navigate("/");
            }
          }
        }
      });
    }, []);

    return <SpecificComponent />;
  }

  return AuthenticationCheck;
}

App.js

import React from "react";
import { Route, Routes, Link, BrowserRouter } 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";
import Auth from "./hoc/auth";

function App() {
  const NewLandingPage = Auth(LandingPage, null);
  const NewLoginPage = Auth(LoginPage, false);
  const NewRegisterPage = Auth(RegisterPage, false);

  return (
    <BrowserRouter>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/login">Login</Link>
          </li>
          <li>
            <Link to="/register">Register</Link>
          </li>
        </ul>

        <hr />
        {/* A <Switch> looks through its children <Route>s and
          renders the first one that matches the current URL. */}
        <Routes>
          <Route exact path="/login" element={<NewLoginPage />}>
            <Route />
          </Route>
          <Route exact path="/register" element={<NewRegisterPage />}>
            <Route />
          </Route>
          <Route exact path="/" element={<NewLandingPage />}>
            <Route />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

저작자표시

'👨‍💻 Web Development > React JS' 카테고리의 다른 글

[React JS] 5. 회원가입/로그인/로그아웃 기능 구현하기 (0)	2023.07.17
[React JS] 4. 백엔드 기본구조 생성하기 (0)	2023.07.15
[React JS] [참조] Redux (0)	2023.06.22
[React JS] 3. 프론트엔드 기본구조 생성하기 (0)	2023.06.18
[React JS] 1. Node.js (0)	2023.05.21

[React JS] 2. React.js