자바스크립트에서 불변성을 유지하기 위한 라이브러리인 Immer는 개발자들 사이에서 인기를 얻고 있습니다. 이러한 Immer를 TypeScript와 함께 사용하면 코드의 안정성과 가독성을 향상시킬 수 있습니다. 이번 블로그 포스트에서는 Immer와 TypeScript를 함께 사용하는 방법에 대해 알아보겠습니다.

Immer란 무엇인가요?

Immer는 불변성을 유지하는 작업을 간편하게 만들어주는 JavaScript 라이브러리입니다. Immer를 사용하면 객체의 트리 구조를 변경하거나 수정할 수 있으며, 내부적으로 변경된 사항을 추적하여 최상위 객체는 원본을 유지하는 방식으로 동작합니다. 이를 통해 불변성을 유지하기 위해 복잡한 코드를 작성할 필요가 없어지고, 코드의 가독성과 유지보수성이 높아집니다.

TypeScript와 함께 Immer 사용하기

1. Immer 설치하기

먼저 프로젝트에 Immer를 설치해야 합니다. 다음 명령을 실행하여 Immer를 설치합니다.

npm install immer

1. TypeScript 설정 추가하기

TypeScript 프로젝트에서 Immer를 사용하려면 추가적인 설정이 필요합니다. tsconfig.json 파일에 다음 설정을 추가해주세요.

{
  "compilerOptions": {
    "lib": ["ESNext", "ES2020.Proxy"],
    "strict": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "esModuleInterop": true
  }
}

1. Immer와 함께 사용하기

이제 TypeScript 프로젝트에서 Immer를 사용할 준비가 모두 끝났습니다. 다음은 Immer를 통해 불변성을 유지하는 예시입니다.

import produce, { Draft } from 'immer';

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'johndoe@example.com',
};

const updatedUser = produce(user, (draftUser: Draft<User>) => {
  draftUser.name = 'Jane Doe';
});

console.log(updatedUser);

Immer의 produce 함수를 사용하여 user 객체를 수정했습니다. draftUser 파라미터를 통해 변경하고자 하는 객체를 전달하며, 여기에서는 name 속성을 변경했습니다. 변경된 결과는 updatedUser 변수에 저장되고, 콘솔에 출력됩니다.

마무리

이처럼 Immer는 TypeScript와 함께 사용하기에 매우 유용한 도구입니다. 코드의 안정성과 가독성을 높이기 위해 Immer를 도입해보세요. Immer에 대한 자세한 내용은 공식 문서를 참고하시기 바랍니다.

#JavaScript #Immer #TypeScript