[8/2] 1차 스터디 10일차

🌱  [인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의 

 

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의

 

 

 # boiler-plate 만들기 (#27 ~ #29)

 

 

27. Redux 심화 

 

Redux 관련 dependency들 다운받기

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

 

 

Redux-promise, Redux-thunk 미들웨어들을 받은 이유

 

redux store는 객체형식의 action만 받는데 store가 못받는 promise나 function으로 전달이 올 수가 있음

-> Redux-thunk는 dispatch한테 function이 왔을 때 어떻게 해야하는지 알려주는 역할

-> Redux-promise는 dispatch한테 promise가 왔을 때 어떻게 해야하는지 알려주는 역할

 

 Redux-thunk랑 Redux-promise 없이 Redux를 사용하면 에러가 많이 남

 

 

 

 

App에 redux 연결하기

 

1)  _reducers 폴더에 index.js 만들기

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

const rootReducer = combineReducers({
  // user,
});

export default rootReducer;

 

combineReducers ?

 

 

store에 reducer가 여러가지가 있을 수 있음 (여러기능에 관한 여러 state가 있을 수 있으니까 state를 관리하는 reducer도 여러개)

ex) User Reducer, Post Reducer, Comment Reducer 등

 

→  여러개의 reducer를 combineReducers를 이용해서 root reducer에서 하나로 합쳐주는것

 

 

 

 

2)  index.js 작성

// client/index.js

import { Provider } from 'react-redux';
import { applyMiddleware, legacy_createStore as createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers'

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
.
.
.
root.render(
  <React.StrictMode>
    <Provider store={createStoreWithMiddleware(Reducer, 
        window.__REDUX_DEVTOOLS_EXTENSION__&&
        window.__REDUX_DEVTOOLS_EXTENSION__()
      )}>
      <App />
    </Provider>
  </React.StrictMode>
);

(  !  createStore를 import 시 configureStore 사용을 권장한다는 경고가 뜸

→  연습문제라 우선은 그냥 경고표시 없이 createStore를 사용하려고 legacy_createStore as createStore를 사용)

 

 

window.__REDUX_DEVTOOLS_EXTENSION__&&
window.__REDUX_DEVTOOLS_EXTENSION__()

→   이 부분은 크롬 앱스토어에서 Redux DevTools 설치하고 이걸 우리 코드에 연결해서 사용하기 위해 작성한 부분

 

Redux DevTools

 

 

 

 

 

 

28. React Hooks

 

React component

 

1)  Class Component

-  많은 기능 사용 가능

-  코드가 길어짐

-  복잡한 구조

-  상대적으로 느린 성능

 

2) Functional Component

-  한정된 기능 사용 가능

-  짧은 코드

-  간단한 구조

-  상대적으로 빠른 속도

 

 

 

→  React Hook이 나오기 전에는 Functional Component에서 쓸 수 있는 기능이 한정적이었는데 

React Hook의 등장으로 Functional Component에서도 모든 기능을 다 쓸 수 있게됨

Class Component  /  Functional Component(with React Hook)

 

 

 

-  React Lifecycle diagram

React Lifecycle Methods diagram

 

 

 

 

 

 

29. Login 페이지 만들기

 

원래 로그인, 회원가입 시 유효성 체크를 위해 Formik와 Yup를 쓰려고 했는데

강의내용이 너무 어려워질까봐 유효성 체크 부분은 이 강의에서는 패스

 

 

- 랜딩페이지 스타일 변경

import React, { useEffect } from 'react'
import axios from 'axios'

function LandingPage() {

  // 간단한 axios 테스트
  useEffect(() => {
    axios.get('/api/hello')
      .then(response => console.log(response.data))
  }, []);


  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100vh'
    }}>
      <h2>시작페이지</h2>
    </div>
  )
}

export default LandingPage

 

 

- 로그인 페이지 작성

import React, { useState } from 'react'

function LoginPage() {

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

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

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


  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100vh'
    }}>
      <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>Login</button>
      </form>
    </div>
  )
}

export default LoginPage

 

여기까지하면 email과 password 입력 input태그에서 타이핑이 되어야함