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

Tony Kim·2022년 2월 19일

ReactHooks antd concurrently redux

Node.js | React | MongoDB | Express

목록 보기

8/8

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

1. Concurrently

Concurrently
백엔드 프론트엔드 한번에 ON

다운로드

npm install concurrently --save

Usage

root directory script

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

2. Antd CSS Framework

Ant Design
링크

다운로드

cd client
npm install antd --save

src/index.js

import 'antd/dist/antd.css';

3. Redux

Redux

predictable state container (상태 관리 라이브러리)
state를 관리해주는 tool

Props vs State
react props 와 state가 있음

1) Props

부모 컴포넌트에 자식 컴포넌트 들어갈 수 있듯이 컴포넌트간 무언가 주고받을 때 Prop이용해야됨
소통방식은 부모에서 자식컴포넌트로만 보낼 수 있음
부모에서 자식에게 1이라는 value 주면 자식 안에서는 Props에서는 변할 수 없음
바꾸려면 부모에서 자식에게 2를 내려줘야함

<ChatMessages
  messaes = {messsages}
  currentMember = {member}
/>

2) State

부모에서 자식에게 주는 것이 아니라, 컴포넌트 안 데이터 교환시 state 써야함
state는 mutable (안에서 value 변경 가능)
state이 변하면 re-render됨

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

Redux X : 컴포넌트가 메세지 전달할때 계층을 하나하나 타고 올라/내려가서 전달
Redux O : 직접 전달이 가능 (훨씬 편하게 state관리 가능)

Redux Data Flow (unidirectional = 한방향)
action -> reucer -> store -(subscribe)> react component -(dispatch=action)> action

1) Action
객체
무엇이 일어났는지 설명하는 객체

{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: {id: 3, name: 'Mary'} }
{ type: 'ADD_TODO', text: 'Read to the Redux docs.' }

2) Reducer
action함으로 3이 4로 변했다는 것을 설명

(previousState, action) => nextState (return값)

3) Store
어플리케이션의 state을 감싸주는 역할
Store 안 여러 Method 활용해서 State관리가능

Redux Dependency 다운로드

1) redux
2) react-redux
3) redux-promise //redux 미들웨어
4) redux-thunk //redux 미들웨어

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

미들웨어 다운로드 이유
Store안의 state 바꾸려면 dispatch(action)이용해야하는데 action은 객체여야함
but, store에서는 객체가 아닌 promise,function형태의 메세지를 수신할수도 있음
promise // dispatch에게 promise 대처법 알려줌
thunk //dispatch에게 function 대처법 알려줌

src/index.js

import { Provider} from 'react-redux';
import 'antd/dist/antd.css';
import promiseMiddleWare from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
import Reducer from './_reducers';
-------------------------------------------------------
const createStoreWithMiddleware = applyMiddleware(promiseMiddleWare, ReduxThunk)(createStore)
//promise와 function받을 수 있게
-------------------------------------------------------
ReactDOM.render(  // react를 redux로 감싸줌
  <Provider
    store={createStoreWithMiddleware(Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__&&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    )}  // redux 인터넷에 연결

  </Provider>
  ,
  document.getElementById('root')
);

src _reducer 파일에 index.js 생성

import { combineReducers } from 'redux';
// import user from './user_reducer';
// state 여러개 있을 수 있어서 reducer도 나뉘어져있음
// 이 나눠진 reducer를 combineReducers이용해서 root reducer에서 하나로 합쳐줌
const rootReducer = combineReducers({
  // user, 로그인, 코멘트 등등 기능 여러개 만들건데합쳐줌
})
export default rootReducer;