immer로 불변성 관리를 쉽게 하자

immer란? 간단히 말해 불변성을 유지하는 코드를 쉽게 만들어주는 라이브러리다.

 

React에선 배열이나 객체를 업데이트 할 때 직접 수정하지 않고 불변성을 유지해주면서 해야 될 때가 많다.

 

간혹 객체내 코드가 깊고 복잡해지면 불변성을 유지 해주기도 복잡하고 코드도 길어진다. 이 때 immer를 사용하면 쉽게 해결할수 있다.

 

npm i immer로 immer를 다운로드 한후

 

import produce from 'immer'; 이렇게 produce라는 함수를 불러온다. 그리고 produce라는 함수를 사용 할 때 에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어주게 된다.

 

immer를 사용한 예)

const reducer = (state=init,action) => produce(state,(draft)=>{

	switch (action.type){
         // 안쓴 경우
    	case: LOAD_MAIN_REQUEST:
        return{
        	...state,
            mainLoading:true,
            mainLoadError:null,
            mainLoadDone:false
            }
       	// 쓴 경우     
    	case: LOAD_MAIN_REQUEST:
           draft.mainLoading=true;
           draft.mainLoadError=null;
           draft.mainLoadDone=false;
           break;
           }
           })