Immer 사용법

김주형·2022년 7월 28일
0

Immer 라이브러리 사용법

const nextState = produce(currentState,draft => {function})

-nextState -> 다음 상태 변수 이름
-currentState -> 업데이트하고자 하는 현재 상태값
-draft -> 현재 상태값을 복사하여 사용
-function -> 어떻게 업데이트하고 싶을지 정의하는 함수

const state = {
  number: 1,
  text: 'immutable',
};

const nextState = produce(state, (draft) => {
  draft.number += 1;
});

/*
  console.log(nextState);
  {
    number:2,
    text:'immutable'
  }
*/

리덕스 액션 타입 정의 + immer

기존의 리덕스 액션 타입을 정의하는데 있어서 redux-actions을 사용하지 않고 그냥 액션 타입을 정의하고 액션 생성함수를 생성했었다. 그리고 reducer 함수를 만들때도 immer를 사용해본 적이 없었는데 오늘 처음 사용해봤다. redux-actions는 뭔가 쓰면서 굳이 사용해야하나 싶었다. 아직 프로젝트가 크지 않은 환경에서 혼자 이것저것 끄적이다보니 액션 타입의 개수가 많지도 않고 크게 필요성을 못 느끼는것 같아서 그런것 같다. 하지만 immer는 확실히 쓰면서도 아 이거구나 싶은 느낌였다. 물론 immer를 쓰지않고도 reducer함수를 만들 수 있다는 가정하에.. JS의 얕은 복사와 깊은 복사의 개념과 연관지어서 한 번쯤 생각해 볼 만한 주제라고 생각한다.

어쨌든 immer는 나중에 실전 프로젝트에서도 기회가 된다면 사용해보고 싶다. 하지만 redux-actions? 뭔가 안익숙해서 그런지 살짝 애매하다.. 하지만 자주 쓰다보면 익숙해지지 않을까 싶기도 하고 확실히 redux-actions를 사용한 코드가 더 깔끔해 보이는것 같기는 하다.

오늘은 여기까지만 하구 내일은 js 비동기통신에 대해서 공부해볼 생각이다. 물론 공부한 내용이지만 인간은 망각의 동물이라... 쨌든 비동기 통신쪽 다시 정리하고 redux 미들웨어 통신쪽도 공부해 볼 생각이다. 리덕스 툴킷이 나온 이후로 사가랑 텅크는 거의 안쓴다고는 하던데 공부하는 입장이니 이것저것 거를거 없이 한번 공부해보자.

profile
프론트엔드 개발 지망생입니다.

0개의 댓글