[React] Redux

1. 리덕스란?

리액트에서 사용할수 있는 하나의 라이브러리이다.

라이브러리라는건 없어도 리액트로 작엄물을 만들수 있지만 편하게 작업하려고 쓰는것이다.

실무에서 리덕스를 안쓰면 매우 불편하기 때문에 필수로 사용한다.

 

리액트는 자식 컴포넌트에 props로 전달은 가능한데

다른 컴포넌트에서 직접 데이터 공유가 불가능하다.

그래서 공유해야할 데이터를 공유받는 자식 컴포넌트들의 공통부모에서 State를 만들어서 자식 컴포넌트에게 전달한다.

리액트는 데이터 흐름이 단방향이기 때문에 이러한 작업이 필요하다.

그래서 작업을 하다보면 부모 컴포넌트에 무척 많은 props가 생기는데 이런 단점을 보완하기 위해서 리덕스를 사용한다.

 

리덕스는 state를 저장해주는 store(저장소) 각각의 컴포넌트가

어느 컴포넌트던 사용할 수 있는 공통된 store(저장소)를 사용할 수 있고 원하는 값을 저장하고 가져올 수 있다.

쉽게 생각해서 컴포넌트에서 값을 요청하고 전달받는걸 직접 할 수 있다.

하지만 컴포넌트에서 저장소에 값을 직접적으로 바로 수정은 안된다.

함수를 통해서 동작하는 방식으로 수정 요청 가능하다.

 

2. 리덕스의 동작 구조

값을 저장하려면 useDispatch 라는 리액트 훅 함수를 사용한다.

구조는 

컴포넌트 -> useDispatch -> Action -> Reducer -> store

컴포넌트가 Action을 보내고 reducer로 전달받고 store의 값을 최신화 해준다.

Action은 동작할 기능의 이름과 행동이다.

Reducer는 함수인데 내가 사용할 동작들을 조건문으로 모아둔곳이다.

컴포넌트가 무엇을 동작할지 Action 행동을 무엇을 할지를 Reducer로 보내고 store의 값을 바꿔준다.

store(저장소)는 객체라고 생각하면 되고 state값을 저장해둘 객체이다.

state의 값이 바뀌면 컴포넌트가 리렌더링ㅇ 된다.

 

값을 가져오는 구조는

useSelector 라는 리액트 훅 함수를 사용한다.

sotre -> useSelector -> 컴포넌트

useSelector는 store에 있는 값을 가져올때 사용하는 함수이다.

 

3. 리덕스 사용방법

Redux 코어 설치

npm install redux

redux는 많은 프로그램이 사용할수 있다. 그중 하나가 react인것 뿐이다.

 

리액트에서는 react-redux 라이브러리로 편하게 사용할수 있다.

npm install react-redux

그리고 index.js에서 전체를 Provider 컴포넌트로 감싸준다.

Provider 컴포넌트는 리덕스 저장소의 사용을 가능하게 만들어주고 이 컴포넌트는 props로 store를 전달받는다.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

reportWebVitals();

 

4. reducer만들기

/redux/reducer/index.js

let init = {
  count: 0,
};
function reducer(state = init, action) {

  switch (action.type) {
    case 'ADD':
      console.log('플러스');
      return { ...state, count: state.count + 1 };
    case 'REMOVE':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

export default reducer;

reducer 함수를 만드는데 필요한 매개변수는 두가지 이다.

state와 action

state는 초기화가 필요하다 -> 함수의 파라미터로 초기값을 넣어준다.

값을 저장할때 useDispatch로 type을 보낸다.

보낸 type은 action.type에 저장되어 리듀서에서 값을 조절할 수 있다.

switch문으로 각 값을 조절했다.

또한 무조건 함수의 return값이 있어야 한다는것을 명심해야 한다.

 

리듀서가 저장소의 값을 변경해주는데 반환값을 받아서 바꿔주는것이기 때문에

저장소는 항상 대기하다가 리듀서가 return 값을 주면 적용을 바로 시켜준다.

...state -> 깊은 복사를 해서 주소값을 바꿔주면서 값이 변했다는 것을 인지시켜준다.

객체에 값이 여러개 있을수 있는데 그값들을 그대로 유지하고 count만 바꾸려고 위와같이 코드를 짰다.

 

5. store 만들기

/redux/store.js

import { createStore } from 'redux';
import reducer from './reducer';

let store = createStore(reducer);

export default store;

createStore는 저장소를 만들어준다.

createStore의 매개변수로는 리듀서를 전달해준다.

 

순서

저장소를 리듀서에 추가해서 저장소를 만들고 저장소를 Provider로 적용시키고 App 컴포넌트에 적용시키는 구조

 

6. 컴포넌트에서 Action 일으키기

components/Count.js

import React from 'react';
import { useDispatch } from 'react-redux';

const Count = ({ count, setCount }) => {
  const dispatch = useDispatch();

  const Add = () => {
    dispatch({ type: 'ADD' });
    setCount(count + 1);
  };
  const Remove = () => {
    dispatch({ type: 'REMOVE' });
    setCount(count - 1);
  };

  return (
    <div>
      <button onClick={Add}>+</button>
      <button onClick={Remove}>-</button>
    </div>
  );
};

export default Count;

반환된 dispatch를 사용해서 Action을 던질수 있다.

dispatch 함수를 사용하는데 매개변수로 객체를 전달해준다.

객체의 규칙은 {type, payload}

type : 동작시킬 행동의 이름

payload : 데이터 전달이 필요할때 데이터를 담는 곳, 있어도되고 없어도 된다. (선택사항)

 

7. store에서 값 받아오기

components/CountView.js

import React from 'react';
import { useSelector } from 'react-redux';
const CountView = () => {
  const count2 = useSelector((state) => state.count);
  return <div>{count2}</div>;
};

export default CountView;

useSelector 함수를 콜백으로 리듀스 폴더 안에 있는 index.js에 작성한 state값을 받을수 있다.