[React] Immer 를 이용한 불변성 관리

React의 불변성 관리

React는 함수형 프로그래밍을 지향하는데 함수형 프로그래밍의 특징중 하나가 순수 함수를 사용하는 것 입니다. 여기서 순수 함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수 입니다.

동시에 순수 함수는 외부의 값을 변경하는 사이드 이펙트가 일어나지 않는 조건을 지키는 함수를 뜻합니다. 여기서 외부의 값을 변경하지 않는다는 부분이 불변성과 깊이 연관되어 있습니다.

​

React 에서 불변성을 지키지 않을 경우 화면이 리렌더링 되지 않습니다.

잘못된 예시

import { useState } from "react";

export const ReactComponent = () =>
{

    const [object, setObject] = useState( {
        count: 0,
    } );

    const clickHandler = () =>
    {
        setObject( object.count++ );
    };

    return <>
        <span>{object.count}</span>
        <button className="button" onClick={clickHandler}>버튼</button>
    </>;
};

위 경우 버튼을 암만 눌러봤자 object.count 의 값은 변하지만 React는 값이 변경되었다는 것을 인지하지 못하고 화면이 리렌더링 되지 않는다.

​

원래는 기존 Object를 복사하여 새로은 Object를 생성한 후 HTML 에 새로운 값을 넣어주면 되지만 일단 코드 보기가 복잡해진다. 코드는 최대한 간단하게 구현하여야 한다 생각한다.

​

그래서 위 문제를 해결하기 위해 Immer 라는 라이브러리를 사용한다.

​

immer

immer 설치

터미널에서 프로젝트 경로로 이동 후 아래 명령어를 입력한다

yarn add immer

위에 코드에 Immer 를 사용했을 경우 아래와 같이 수정될 수 있다.

​

immer 사용 예시

import { useState } from "react";

import { produce } from "immer";

export const ReactComponent = () =>
{

    const [object, setObject] = useState( {
        count: 0,
    } );

    const clickHandler = () =>
    {
        setObject( produce( ( draft ) =>
        {
            draft.count++;
        } ) );
    };

    return <>
        <span>{object.count}</span>
        <button className="button" onClick={clickHandler}>버튼</button>
    </>;
};