Immer는 JavaScript에서 불변성 관리를 쉽게 해주는 라이브러리입니다. Immer의 핵심 함수 중 하나인 produce 함수는 불변성을 유지하면서 상태를 수정할 수 있는 기능을 제공합니다. 이번 글에서는 produce 함수의 파라미터 옵션에 대해 알아보겠습니다.

produce 함수의 기본 형식

produce 함수는 아래와 같은 기본 형식을 갖습니다.

produce(baseState, recipe: (draftState) => void, options?: ProducerOptions): nextState

여기서 baseState는 수정할 상태를 나타내며, recipe는 상태를 수정하는 로직을 담고 있는 함수입니다. options는 선택적으로 설정할 수 있는 파라미터로, ProducerOptions 타입을 갖습니다. nextState는 baseState를 수정한 후의 상태를 의미합니다.

파라미터 옵션 사용 예시

1. isES5 옵션

isES5 옵션은 ES5를 사용하는 환경에서 produce 함수를 사용할 때 필요한 옵션입니다. ES6 이상의 문법을 사용하는 환경에서는 기본값이 false입니다. options 객체의 isES5 속성에 true를 지정하여 사용할 수 있습니다.

const options = { isES5: true };

const nextState = produce(baseState, (draftState) => {
  // 상태 수정 로직 작성
}, options);

2. patches 옵션

patches 옵션은 상태 수정이 발생한 위치와 값을 추적하는 기능을 제공합니다. options 객체의 patches 속성에 true를 지정하여 사용할 수 있습니다.

const options = { patches: true };

const nextState = produce(baseState, (draftState) => {
  // 상태 수정 로직 작성
}, options);

결론

Immer의 produce 함수는 불변성을 유지하면서 상태를 수정하기 위한 강력한 도구입니다. isES5와 patches와 같은 파라미터 옵션을 활용하여 개발환경에 맞게 사용할 수 있습니다. 이러한 옵션들을 잘 활용하면 코드의 가독성을 높이고 수정 과정을 추적하는데 도움을 줄 수 있습니다.

#Immer #JavaScript