[MAC] Node/React 기초 - Redux란?, Redux 설치

AntD 다운 (Css Framework)

$npm install antd --save

 

 

Redux 란?

: State 를 관리해주는 Tool

 

Component끼리 데이터를 주고받을 때 Props 이나 State를 이용한다.

 

<Props>

- Properties의 줄임말

- 컴포넌트끼리 서로 소통하는 방법

- 부모 컴포넌트에서 자식 컴포넌트로만 소통 가능

- 부모한테 받은 데이터는 자식 컴포넌트 안에서 수정 불가(immutable) -> 수정하려면 부모 컴포넌트에서 값을 새로 받아야함

 

<State>

- 컴포넌트 안에서 데이터를 교환하거나 전달할 때 사용됨(검색 창에 글을 입력할 때 글이 변하는 것)

- State 가 변하면 re-render 됨

 

 

 

- Redux Store에 저장해놓으면, 타고 올라가거나 내려가지 않아도, Store를 통해 효과적으로 State 관리 가능!! 

 

 

---

Redux의 데이터 Flow

- 단방향으로만 흐른다

 

 

 

<Action>

- 무엇이 일어났는지 설명하는 객체

 

<Reducer>

- 이전의 State와 Action 객체를 받은 후에 바뀐 State를 리턴해줌.

 

 

 

<Store>

- State를 감싸주는 역할

- Store안의 수많은 메소드들로 State를 관리한다.

 

 

 

 

---

 

 

 

Redux 설치

먼저 아래의 Dependency들을 다운 받아야한다.

1. redux

2. react-redux

3. redux-promise

4. redux-thunk

 

 

client디렉토리에 Dependency를 설치한다.

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

 

여기서 3번과 4번은 Middleware이다.  Middleware가 필요한 이유가 뭘까?

 

Store의 State를 변경하기 위해서는 Action을 Dispatch해야한다. 

그런데 Store에는 항상 객체 형식의 Action이 오는 것이 아니다. Promiese 또는 Function 형식으로 올 수도 있다. 이런 점을 해결하기 위해 Promise 형식으로 오는 것들은 reux-promise로, Function 형식으로 오는 것들은 redux-thunk로 처리하게 된다. 

 

 

 

 

 

Reduxdhk App을 연결해보자.

 

먼저 Redux DevTools를 다운한다.

 

chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related

Redux DevTools

 

 

 

그 다음 client/src/index.js 를 아래와같이 수정하자.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import * as serviceWorker from './serviceWorker';
import { Provider} from 'react-redux';
import 'antd/dist/antd.css';

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


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


ReactDOM.render(
  //App을 Provider로 감싸서 Redux랑 어플리케이션이랑 연결시키는 것
  <Provider>   
    store={createStoreWithMiddleware(Reducer,
      
      window.__REDUX_DEVTOOLS_EXTENSION__ &&		//extension
      window.__REDUX_DEVTOOLS_EXTENSION__ ()
      
      )}
    <App />
  </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();

 

 

 

client/src/_reducers/index.js

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

const rootReducer = combineReducers({
//user
})

export default rootReducer;

 

 

Store안에는 여러 State에 따른 다양한 Reducer들이 있다. 나눠진 Reducer들을 combineReducers를 이용해서 RootReducer에서 각 Reducer 들을 합쳐준다.

 

 

---

 

 

 

Class Component 와 Functional Component의 차이점

 

 

 

 

 

Class Component 

- Functional Component에서는 위 그림 중 어떠한 기능도 쓸 수 없다. 

- 그래서 대부분 Class Component를 썼었다.

- 그러다 React 16.8 버전에서 React Hook을 발표를 했고, 이 이후로부터는 Functional Component에서도 위의 기능들을 쓸 수 있게 됐다.

 

 

 

- Hook이 나오고 아래와 같이 같은 기능을 다른 방법으로 구현할 수 있게 됐다. 

 

- 요즘에는 대부분 Hook을 써서 개발을 한다.