CSS FRAMEWORK

for React js

Ant Design

Ant Design 바로가기

• 장점 : 이용하기 편함

$ npm install antd

• src/index.js
  import 'antd/dist/antd.css';

Redux

상태 관리 라이브러리?

Props vs state

Props : property
component간 주고받을 때. 소통 방식은 parent to children 만 가능하다.

• 소통받은 데이터는 immutable

State :
component 안에서 데이터 교환, 전달.

• mutable.

Redux는 State를 관리하는 툴.

Redux가 없으면 component를 차례대로 이동해줘야 한다.
but Redux를 이용하면, Redux를 통하여 직접 이동 가능. 차례대로 이동할 필요가 없다는 것.

Redux : data는 unidirectional

ACTION → REDUCER → STORE → (Subscribe) → React Component → (action) → ACTION

Action : a plain object describing what happened.
{type : 'LIKE_ARTICLE', arcicleId : 42}

Reducer : a function describing how the application's state changes
(previousState, action) => nextState

Store : state를 감싸주고, state를 관리하는 method를 가지고 있음

Set up

1. redux
2. react-redux
3. redux-promise
4. redux-thunk
   설치

Redux-promise, Redux-thunk

redux store will only accept dispatching plain object actions
→ 하지만 function이나 Promise 형태로 객체가 올 때도 있다.
Redux-thunk는 dispatch에게 function을 받는 방법을,
Redux-promise는 promise를 받는 방법을 알려준다.

-src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import 'antd/dist/antd.css';
// promise, thunk 이용
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';


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

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

• _reducers/index.js

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

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

export default rootReducer;

redux 연결 완료