강의정리 (Antd CSS Framework / Redux / Hooks)

요즘엔 이런 CSS 프레임워크를 많이 사용한다

 

Material UI / React Bootstrap / Semantic UI / Ant Design / Materialize 를 리액트에서 많이 쓴다.

https://ant.design/ 

 

client로 가서 설치

npm install antd --save

클라이언트의 index.js에 다음 코드로 import

import 'antd/dist/antd.css';

 

 

---

Redux

리덕스가 없으면, 데이터가 여기저기서 참조하게 되므로, 복잡해지기 쉽다.

리덕스는 store에서 쏴주므로, 훨씬 데이터 state관리가 용이해진다

 

다운받아야 할 dependency 목록 : redux / react-redux / redux-thunk / redux-promise

이 중 thunk와 promise는 리덕스 미들웨어이다

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

한번에 설치
npm install redux react-redux redux-thunk redux-promise --save

---

 

리덕스미들웨어(redux-thunk / redux-promise)가 필요한 이유는?

리덕스 스토어안에 모든 state을 관리하게되는데, 변경시 dispatch를 이용한다

가끔은 객체가 아닌 promise, function형식으로 받을 일이 있는데, dispatch는 객체만 받을 수 있다.

 

그래서 thunk는 dispatch에게 function을 받는법을 알려주고,

promise는 dispatch에게 promise을 받는법을 알려준다

 

---

index.js에 와서 thunk와 promise를 import해와서 createStore와 엮어서

createStoreWithMiddleware 변수를 생성해준다. 그리고 Provider태그의 store속성에 createStoreWithMiddleware()로 넣어준다. 이렇게 하면 프로미스와 함수도 받을 수 있다.

 

import {Provider} from "react-redux"
import PromiseMiddleware from 'redux-promise'
import ReduxThunk from 'redux-thunk'
import { applyMiddleware, createStore } from 'redux';

const createStoreWithMiddleware = applyMiddleware(PromiseMiddleware, ReduxThunk)(createStore);
...
<Provider store={createStoreWithMiddleware()}>
    <App />
</Provider>
...

 

이제 _reducers폴더에 index.js파일을 만들고 아래처럼 루트리듀서를 생성해준다

import {combineReducers} from "redux";

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

export default rootReducer;

그리고 크롬웹스토어에가서 Redux dev tools를 설치한다

 

그리고 다시 리액트의 index.js로 돌아와 아래 코드를 추가해준다. (이렇게 하면 어플리케이션에 리덕스 연결 끝)

import Reducer from './_reducers'; // 만든 루트 리듀서 가져오기
...
<Provider store={createStoreWithMiddleware(
	Reducer, 
	window.__REDUX_DEVTOOLS_EXTENSION__ &&
    window.__REDUX_DEVTOOLS_EXTENSION__()
)}>