MERN 기본파일 만들기 - 11)antd 디자인 사용하기, redux 사용하기, React-Hooks

 

 

스타일보다 기능에 초점을 맞추기 위해서 css framework를 쓰자

 

https://ant.design/

Ant Design - The world's second most popular React UI framework

 

clientdp npm install antd --save를 해준다. 

 

스타일을 import 해준다. (index.js에 해주자)

 

 

 

 

서버에서 받은 데이터중에서 어떤걸 받아서 client에 보여줄 지 

redux를 이용해서 설정하자.

부모컴포넌트와 자식 컴포넌트끼리 주고받을 때는 prop을 이용한다.(부모->자식방향으로 보냄, props는 자식이 바꿀 수 없다. state는 하나의 컴포넌트 안에서 사용)

리덕스 있을 때와 없을 때 개발 환경 차이

스토어 안의 state를 변경하고 싶으면 dispatch를 해야한다. 

 

 

 

 

 

 

우리는 redux, redux-promise, redux-thunk가 필요하다. 

 

액션은 객체 형식의 데이터를 받아야 처리할 수 있다. 

그런데 객체형식이 아닌 프로미스형식이나 function형태를 받을 때도 있는데, 이럴때 처리하기 위해서 

redux-promise, redux-thunk를 사용해서 redux를 도와준다. 

 

미들웨어를 이용해야지만 객체만 받지 않고 promise와 function도 받을 수 있다. 

https://github.com/zalmoxisus/redux-devtools-extension

zalmoxisus/redux-devtools-extension

 

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

 

파일을 생성해준다. 

 

 

 

 

클래스는 제공하는 범위가 큰대신 좀 느리고, function은 제한적인 대신 빠르다. 

훅의 사용으로 functional component의 사용폭이 굉장히 넓어졌다.