redux, recoil 사용 후기

아마도개발자·2022년 9월 4일

프론트 기술

목록 보기

1/2

개요

redux와 recoil을 어떻게 사용하는지에 대해서는 자세하게 설명은 하지 않습니다.
redux는 회사에서 현재 사용 중인데 recoil 계속 뜨고 있고 다른 회사에서도
많이 쓰고 있다길래 프로덕션에서 사용 할 수 있는지 또 두개의 차이가 얼마나 있는지 알아보기 위해 요번에 사용해 봤습니다.

결론

만약 새로운 프로젝트를 세팅 부터 들어가는데 Redux Template 따로 없고 redux를 사용해 보지 않은 팀원이 많으며, Recoil을 선택 할 것입니다.

어째서 Recoil을?

첫번째 이유

Redux에 비해 훨씬 짧은 코드량
물론 요즘엔 순수하게 redux만 사용하지 않고 Redux/toolkit을 사용합니다. 그 덕에 작성해야 할 코드량이 많이 줄기는 했죠. 그런데도 불구하고 체감적으로는 Recoil이 훨씬 짧았습니다. 아래는 각 라이브러리를 쓰기위한 최소한의 코드량 입니다.

Redux + Redux/Toolkit

/** counterReducer.js */
import { createSlice } from "@reduxjs/toolkit";

export interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

/** store.js */
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducer/counterReducer";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

/** dispatch custom hook */
import { useDispatch, useSelector } from "react-redux";
import { decrement, increment } from "../redux/reducer/counter";
import { RootState } from "../redux/store";

export default function useReduxCount() {
  const reduxCount = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  const incrementRedux = () => dispatch(increment());
  const decrementRedux = () => dispatch(decrement());

  return { reduxCount, incrementRedux, decrementRedux };
}

Recoil

import { atom } from "recoil";

const countState = atom({
  key: `count${+new Date()}`,
  default: 0,
});

export { countState };

/** custom hook  */
import { useRecoilValue, useSetRecoilState } from "recoil";
import { countState } from "../atoms/countAtoms";

export default function useRecoilCount() {
  const recoilCount = useRecoilValue(countState);
  const setCount = useSetRecoilState(countState);

  const incrementRecoil = () => setCount((count) => count + 1);
  const decrementRecoil = () => setCount((count) => count - 1);

  return { recoilCount, incrementRecoil, decrementRecoil };
}

custom hook은 필수는 아니나 공용적으로 쓰기 위해 예제로 만들어봤습니다.

두번째 이유

짧은 Learning curve
제가 처음에 toolkit 없이 redux만 썼을 때 reducer 하나를 만들기 위해 action, reducer를 세팅 하는 부분을 익히는게 많이 힘들었던 기억이 나네요.
하지만 리듀서는 atom 하나만 추가 하면 되니 훨씬 간편하고 같은 팀원에게 설명 하는 것도 훨씬 쉬운 것 같습니다.

물론 recoil도 비동기 처리를 위한 기능들을 쓰기 위해서는 더 알아야하나 기본으로 쓰기 위해서는 atom만 추가하면 된다는 결론에 도달했습니다.

Recoil의 아쉬운점...

아쉬운 debug툴...
redux는 현재 debug 툴이 매우 잘 되어있기 때문에 사용이 매우 편합니다.
하지만 recoil은 아직 사용하기도 불편하고 제대로 작동을 하지 않아 console로 확인을 해야만 합니다.
아직은 beta...
Redux 보다 부족한 여러가지의 라이브러리들