[React] 리액트 redux 예제를 통해 알아보기

① React redux 란 ?

Flux 개념을 바탕으로 하여 State 관리 라이브러리이다. 그래서 React는 컴포넌트에서 관리를 하지만 Redux 라이브러리를 사용하게 된다면 store에서 상태를 관리를 해주기 때문에 React Component에서 보여주기만 하는 용도로 사용이 되고 있다.

② redux 장점

웹 사이트 상태관리를 고민할 필요가 없다.
state에서 쉽게 저장하고 불러올 수 있다.
읽기 전용으로만 취급하기 때문에 이전 상태로 돌아가고 싶다면 덮어쓰면 된다.
상태 변경을 전송할 수 있도록 자바스크립트 객체로 구성을 강제로 부여한다.

③ redux 단점

강제하는 방식때문에 반대로 코드가 복잡해 질 수 있어서 개발자에게 제약이 발생한다.

④ redux 예제

 

※ 1. 우선 라이브러리를 다운로드 해줘야한다.

npx create-react-app redux-app
yarn add redux react react-redux

2 . 의존 모듈을 불러온다.

여기서 redux를 사용을 원한다면 createStore객체도 불러와야한다.

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

3. index.js - 랜더링하기

여기서 action은 어떤 변화가 일어나는지 작성한다.

action 작성하기 위해선 첫번째 필드 tpye 필수적이고

한번클릭이 되었을때 얼마나 더해지는지 addBy를 추가할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import reducer from './store';
import { Provider } from 'react-redux';

const store = createStore(reducer);

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

4. store 생성하기

const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

export const increase = () => {
  return {
    type: INCREASE,
  };
};

export const decrease = () => {
  return {
    type: DECREASE,
  };
};

const initstate = {
  number: 1,
};

const reducer = (state = initstate, action) => {
  switch (action.type) {
    case INCREASE:
      return { number: state.number + 1 };
    case DECREASE:
      return { number: state.number - 1 };
    default:
      return state;
  }
};

export default reducer;

5. 컴포넌트 작성하기

[React] 리액트 코드분할 이유 및 예제