[React] Redux를 이용해서 상태관리하기

React에서 상태관리가 필요한 이유

1. props를 안 쓰려고!

   →변수를 props로 전달해야하는데 컴포넌트에서 필요없는 props라도 전달을 해줘야하는 상황을 방지하기 위해(a.k.a prop drilling)

2. 상태관리를 편하게 하려고!

   → 각각의 컴포넌트에서만 hook을 이용해서 관리하는것이 아닌, 웹 페이지 전체에서 사용되는 전역변수 를 관리하기 쉽다.

flux 패턴

• 데이터를 단방향으로 전달하기 위해 고안된 패턴.
• 페이스북 팀에서 기존의 MVC 모델을 보완하기 위해 만들었다고 한다.
  (https://velog.io/@huurray/React의-탄생과-Flux-패턴에-대하여 참고)
• 패턴의 역할들
  • flux 패턴에서는 각각의 역할들이 있다.

  1. action creator

     • type과 payload를 포함한 액션을 생성한다.
     • 액션을 생성한 후에는 디스패쳐로 넘겨줌
     • 대부분의 액션은 상수로 표현함

  2. dispatcher

     • call back이 등록되어있는 곳
     • 액션을 보내야하는 store를 가지고 액션 생성자가 액션을 넘겨주면 여러 스토어에 액션을 보냄

  3. store
     - 애플리케이션 내의 모든 상태와 관련된 로직을 가지고 있음.
     - 모든 상태변경은 store에 의해 결정됨
     - 상태 변경을 요청하기 위해서는 1→2→3의 순서로진행됨.

     ⇒ 내가 생각했을 때는, flux 패턴은 데이터가 단방향으로 흐르고, 미리 액션으로 지정해둔 함수들을 디스패처를 통해 가져오고 스토어를 통해 저장시켜준다고 이해하면 될 것 같다!

Redux

• flux 패턴이 복잡해서 생긴 라이브러리
• 그치만 이 라이브러리도 만만하진않다.
• 그래도 flux를 보다 redux를 보면 선녀같다😇
• 상태관리를 할 변수를 선언하고, 그 변수를 바뀌게 할 수 있는 방법을 미리 선언해두고,
  실제 컴포넌트에서 값이 변할 때 미리 선언해둔 방법을 불러와서 사용하는 방식이다!
• 한번에 이해 가능한 유튜브 띵강의 : https://youtu.be/QZcYz2NrDIs

redux 사용법

1. 설치

   npm install --save redux react-redux

   • 공식문서에는 npm install react-redux만 하던데,
     오류가나서 검색해보니 스오플에서 위의 명령어를 알려줬다.

2. index.js 설정

   1. import

      import { Provider } from "react-redux";
      import { createStore } from "redux";

   2. 상태관리할 변수 선언

      const like = 0;

   3. action선언

      • 액션의 이름을 increase , decrease로 선언해주었다.
      • 이 이름을 나중에 컴포넌트에서 디스패쳐를 통해 불러와서 함수를 사용한다.

      function hello(state = like, action) {
        if (action.type == "increase") {
          state++;
          return state;
        } else if (action.type == "decrease") {
          state--;
          return state;
        } else {
          return state;
        }
      }

   4. store 만들기

      • 위의 함수를 store로 만들어서 store함수에 등록해준다.

      let store = createStore(hello);

   5. ReactDOM.render 설정

      • 원래 있던 코드인 React.StricMode 하단에 Provider를 선언해주고
        미리 만들어둔 store를 넣어준다.

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

3. App.js(컴포넌트) 설정

   1. import

      import { useDispatch, useSelector } from "react-redux";

   2. 상태관리를 할 변수 불러오기

      const like = useSelector(state => state);

   3. 디스패쳐 불러오기

      • disatch로 useDispatch를 사용할 수 있다.

      const dispatch = useDispatch();

   4. 디스패쳐를 이용해 액션 선언하기

      • onClick 이벤트에 dispatch를 이용해서 액션을 넣어준다.
      • type을 이용하여 미리 지정해둔 action을 사용할 수 있다.

      <button
              type="button"
              class="btn btn-light"
              onClick={() => {
                console.log("클릭");
                dispatch({ type: "increase" });
              }}
            >
            </button>

4. 결과

   
   전체 코드는 여기서 확인할 수 있다.
   

마무리

• 뭘 개발하든 전역으로 관리해주는 변수를 만드는건 꼭 필요한데 리액트에서는 이렇게 하는구나를 배웠다.
• 다음에 프로젝트를할 때는 꼭 redux를 이용해서 상태관리를 해줘야겠다.
  (페북이 겪은 알림 개수문제를 리덕스를 통해 해결해보면 좋겠다.)
• 코딩애플님께서 말하시길,,, 문법은 이해할 필요가 없다. 이거 만든사람이 그냥 만든거다. 외워서 적용만 잘 하면 된다 라고 말한게 공부하는데 아주 큰 도움이 됐다.