리덕스 사용기.... with next.js(1)

저번주에 리덕스 초반개념에 대해 공부를 했었는데 생각보다 많이 어려워서 당황했다 개념은 어느정도 이해를 했다고 생각했는데 아닌가 보다.
다시 복습한다는 느낌으로 next.js 사용하면서 redux 연결하는 과정을 기록 해 볼려고 한다.

0. 왜 리덕스를 사용할까?

리덕스는 중앙저장소에서 편하게 상태값을 저장하고 변경하기 위해서 나온 라이브러리다 바닐라JS,react,Vue 등등 다 사용할 수 있다.
리덕스 처럼 있는게 모빕스,react 자체에서는 ContextAPI 정도가 많이 사용되고 있다. 일단 리액트는 어떤 값을 전달 받기 위해서는 상위 부모에서 props 를 전달 받아야 하는 번거로움이 있다. 그래서 프로젝트가 커지면 커질수록 props 전달이 복잡해지고 관리하기가 어려워진다 이런 어려움을 해결하기위해서 나온게 redux 이다. 전역적으로 저장장소(store)를 만든 다음에 아무리 깊이 있는 컴포넌트여도 한번에 값을 가져와서 보여주고 고치고 할 수 있게되었다.
redux,Mobx,contextAPI 차이점을 알아보겠다.

redux:장점은 일단 값을 추적하기 좋다, devtool도 잘 되있고. 어디서 변경되었는지 어디서 상태가 바꼇는지 빠르게 알수있고 고칠수있다. 개발자 툴에서 디버깅이 아주 잘 되있어서 이걸 결정해서 공부시작하게 되었다.
단점은 코드량이 많아진다 코드에서 써야할게 다른 라이브러리 비해 많아진다는게 단점이다.
Mobx:장점은 리덕스랑 반대로 값을 추적하기가 리덕스보다 비교적으로 힘들다. 그래서 코드에서 실수를 하면 값을 추적하고 에러찾는데 애 먹을수가있다 근데 반대로 코드량이 정말 적어 쉽게 설정하고 할수가있다. 초보자들은 리덕스를 먼저 배우고 Mobx를 공부하는걸 추천한다고 한다.
ContextAPI:위 두개와 제일큰 차이점은 컨텍스트API는 비동기기능 구현이 힘들다. 보통 쓰는 이유가 중앙저장소가 서버랑 연결이 되있어서 대부분이 비동기가 필요하다 하지만 컨텍스트API는 비동기를 구현할려면 위 두개 라이브러리 보다 많이 힘들다. 작은규모 프로젝트에서는 쓸만하다고 생각한다.

1.store 파일 생성해서 configureStore.js 생성한다

여기서 next-redux-wrapper 를 사용할것이다.
왜 next-redux-wrapper 를 사용해야 next.js 에서 리덕스를 쫌 변하게 개발을 할 수 있다.
일단 강의 따라하면서 배워갈 계획이다.
알게되면 추가하게 될 내용

configureStore 는 store 초기 설정하는 부분이라고 생각하자.

npm i next-redux-wrapper redux redux-devtools-extension //설치 

store라는 폴더를 생성해서 configureStore.js를 만들어 기본 셋팅을 해 준다.

import {createWrapper} from 'next-redux-wrapper';
import { applyMiddleware, compose, createStore } from "redux";
import {composeWithDevTools} from 'redux-devtools-extension';
import reducer from '../reducers';

const configureStore = () =>{
      const middlewares = [];
    
    const enhancer = process.env.NODE_ENV === 'production' ?  
          compose(applyMiddleware(...middlewares)): 
    composeWithDevTools(applyMiddleware(...middlewares));

    const store = createStore(reducer,enhancer);
    return store;
	
};

//createWrapper 두번째 인자는 옵션객체이다
const wrapper = createWrapper(configureStore,{
    debug:process.env.NODE_ENV === 'development',
  // 디버깅할때 더 자세한 정보를 보기위해서 이렇게 설정 한거다.
  // 개발할때는 이것을 트루로 하는게 개발하는데에 도움이된다.
});

export default wrapper;

2._app.js 에서 리덕스 묶기.

버전마다 코딩 하는 방식이 다르다. 필자가 현재 쓰는 버전은 6 버전이다.
"next-redux-wrapper": "^6.0.2",

import React from 'react';
import PropTypes from 'prop-types';
import 'antd/dist/antd.css';
import Head from 'next/head';
import wrapper from '../store/congiureStore';// 1번에서 만든 wrapper
const App = ({Component}) => {
    return (
        <> // 리액트 리덕스 처럼 Provider store={store} 태그로 감쌀 필요없다.
      		...
        </>
    )
}

App.propTypes = {
    Component: PropTypes.elementType.isRequired
}

export default wrapper.withRedux(App); // 이런식으로 전체 App 을 감싸준다.