CSS Framework / Redux 개념 및 설정

< CSS Framework >

CSS Framework 종류 for React

1. Material UI -> 사용하기 어렵다.

2. React Bootstrap

3. Semantic UI

4. Ant Design 

5. Materialize

 

 

Ant Design을 사용할 것이다.

장점)

디자인이 깔끔하다.

Enterprise 환경에서도 잘 어울리는 디자인

쓰기가 용이하다.

 

단점)

용량이 매우 크다.

 

 

 

 

 

 

Ant Design 홈페이지에 가서 getting-started 따라한다.

 

ant.design/docs/react/introduce

Ant Design of React - Ant Design

 

 

 

비주얼 스튜디오 코드 Terminal에서

cd client
npm install antd --save

 

client/src/index.js에

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

 

하면 설정 끝.

 

 

 

 

 

 

 

 

 

< Redux 이론 >

 

Redux란? 상태 관리 라이브러리

 

Prop vs State

 

1) Prop

: Properties의 약자

: 컴포넌트 간에 데이터를 주고받을 때 사용

: 부모 컴포넌트에서 자식 컴포넌트로만 보낼 수 있다.

: 부모 컴포넌트에게 받은 데이터를 자식 컴포넌트가 변경할 수 없다. 바꾸려면 다시 부모 컴포넌트에게 다른 값을 받아야한다.

 

 

2) State

: 부모, 자식 간의 그런 관계가 아니고, 컴포넌트 간의 데이터를 전달하는 방법이다.

: 따라서 받은 데이터를 변경할 수 있다.

: State에서 값을 변경하면 re-rendering 되는 효과가 있다.

: 예를 들어, 검색창에 글을 입력할 때 글이 변하는 것은 state를 이용한 것이다.

 

이러한 State를 관리하는 것이 Redux 이다.

 

 

 

 

 

 

 

모든 컴포넌트는 Comment를 가지고 관리하고 있다.

그리고 부모 컴포넌트는 자식 컴포넌트의 Comment도 관리하고 있다.

이 때, Redux가 자식 컴포넌트 Comment의 변화를 부모 컴포넌트에게 한번에 전달하는 역할을 한다.

아래 그립과 같이, Redux Store에 넣어놓고

 

 

 

 

 

 

 

 

 

 

< Redux 실전 >

 

1. 다운받아야 하는 dependencies

1) redux

2) redux - thunk

3) redux - promise

4) react - redux

 

3)과 4) 리덕스를 더 잘 사용할 수 있도록 도와주는 미들웨어이다.

 

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

 

 

 

2. import

 

import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise'
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';

 

 

 

 

3. middleware

 

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

 

 

 

 

4. store

 

- 크롬 익스텐션 Redux DevTools 설치 후

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

 

 

 

 

5. _reducers 파일 밑에 index.js 파일 생성

 

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

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

export default rootReducer;