Immer 를 이용한 불변성 관리

| Immer 란 ?

리액트에서 배열이나 객체를 업데이트 해야 할 때 직접 수정은 절대 하면 안되며, 불변성을 지켜주어야 합니다.

직접 수정하는 경우

const a = {  
    a: 1,  
    b: 2  
};  
    a.a = 4;  

이런 방법을 다음과 같이 업데이트 해야합니다.

const a = { a: 1, b: 2 };

const change = {  
    ...a, b:3  
};  

배열도 마찬가지로 push,splice등 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되며
concat, filter, map 함수를 이용하여 생성해야합니다.

spread연산자( = ... 연산자) 는 구조가 deep할수록 코드가 조금 복잡해집니다.

따라서, immer라는 라이브러리를 사용하여 구현하면 보다 쉽게 가독성이 높은 코드로 구현할 수 있습니다.

| Immer 사용법

먼저, 프로젝트에 immer를 설치애햐 합니다.

$ yarn add immer

그 후
produce 라는 이름으로 불러와서 사용합니다.

import produce from 'immer';

그리고 produce 함수를 사용 할 때에는
첫 번째 파라미터 : 수정 하고 싶은 상태
두 번째 파라미터 : 어떻게 업데이트 하고 싶은지 정의하는 함수 즉, 첫 번째 파라미터에 할당된 객체 or 배열을 바꾸는 함수

(!! 이 두번째 파라미터 부분이 많이 헷갈려서 더 찾아봤는데 첫 번째 값을 기준으로 불변하는 객체를 수정 가능하게 해줄 수 있다고 합니다. 즉, 첫 번째 값을 기준으로 움직이는 프록시 (일종의 방어막) 같은 역할을 하고 이 값으로 수정을 합니다.)

| 예시

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

console.log(nextState);

// { number: 2, dontChangeMe: 2 }

const state = { 
    tests: [ { id: 1, title: '제목.', body: '내용.' 
        ,comments:[
                    { id: 1, text: 'immer테스트중입니다.' }]
                 }
             ,{
                     id: 2, title: '제목', body: '내용'
        , comments:[ 
                    { id: 2, text: 'immer test 2 ' } ] 
          }]

, selectedId: 1 };

 

 

 

tests 배열 안의 id가 1인 test 객체를 찾아, comments에 새로운 댓글 객체를 추가해줘야 한다고 가정한다면,

 

const final = produce(state,draft => { const post = draft.tests.find( test => test.id === 1); post.comments.push({

id : 3 ,text : " immer 작업 중 " 

});

});

이처럼 코드가 한결 더 깔끔해졌습니다.

단, 배열 객체가 deep한곳에 위치하지 않으면 immer를 사용하는 것 보다 concat 과 filter 를 사용하는 코드가 더 짧고 유용합니다