MERN 기본파일 만들기 - 11)antd 디자인 사용하기, redux 사용하기, React-Hooks
스타일보다 기능에 초점을 맞추기 위해서 css framework를 쓰자
Ant Design - The world's second most popular React UI framework
ant.design
clientdp npm install antd --save를 해준다.
스타일을 import 해준다. (index.js에 해주자)
서버에서 받은 데이터중에서 어떤걸 받아서 client에 보여줄 지
redux를 이용해서 설정하자.
스토어 안의 state를 변경하고 싶으면 dispatch를 해야한다.
우리는 redux, redux-promise, redux-thunk가 필요하다.
액션은 객체 형식의 데이터를 받아야 처리할 수 있다.
그런데 객체형식이 아닌 프로미스형식이나 function형태를 받을 때도 있는데, 이럴때 처리하기 위해서
redux-promise, redux-thunk를 사용해서 redux를 도와준다.
https://github.com/zalmoxisus/redux-devtools-extension
zalmoxisus/redux-devtools-extension
Redux DevTools extension. Contribute to zalmoxisus/redux-devtools-extension development by creating an account on GitHub.
github.com
client 에 npm install react-redux redux redux-promise redux-thunk --save를 해준다.
index.js를 다음과 같이 수정해준다.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import "materialize-css/dist/css/materialize.min.css";
import {Provider} from "react-redux";//프로바이더 사용
import { createStore, applyMiddleware} from "redux";
import promiseMiddleware from "redux-promise";
import ReduxThunk from 'redux-thunk';
import Reducer from './reducers';
//객체 뿐 아니라 promise, function형식도 받기 위해서 미들웨어 사용
const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);
ReactDOM.render(
//무언가 server에 request할때 actions폴더를 이용하고 받아온 정보를 actions폴더에서 reducers 폴더에 담아서 front에 보여줄것만 브라우저에 보낸다.
<Provider store ={createStoreWithMiddleware(Reducer,
//chrome의 redux dev tool을 이용하기 위해서 다음과 같이 입력
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__())} >
<BrowserRouter>
<App />
</BrowserRouter>,
</Provider>
, document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
여러가지 리듀서 타입(변하는 값을 리턴)을 combineReducer라는 것을 이용해서 root 리듀서에서 하나로 합쳐주는것이다.
src폴더에 다음과 같이 actions, reducers 폴더를 생성해준다.
만약 client가 서버에게 request를 한다면 그게 우선 actions 폴더로 갈 것이다.
actions폴더에서 서버로 다시 이동하고 서버는 다시 데이터들을 actions폴더로 보낸다.
actions폴더안의 response들이 다시 reducer폴더로 이동한다.
그 이후에 reducer가 만약 그 안에서 우리가 display하고 싶은 것이 있다면 dispatch해서 browser에 보여준다.
reducer> user_reducer.js를 생성해준다.
그 이후,
reducer> index.js
import {combineReducers} from 'redux';
import user from './user_reducer';//지금은 유저에 대한 정보만 다룬다.
const rootReducer = combineReducers({
user
}
)
export default rootReducer;
actions>types.js
actions>user_actions.js
파일을 생성해준다.
