불변성을 유지하려면 어떻게 해야하나요?

답변

자바스크립트에서 불변성을 유지하려면 객체나 배열을 직접 수정하는 대신 새로운 객체나 배열을 생성하여 변경 사항을 반영하는 방식을 사용할 수 있습니다.

예시로 스프레드 연산자를 사용하여 복사본을 생성하고 map, filter, reduce와 같은 메서드로 배열을 변경시킬 수 있습니다.

 

자바스크립트에서 불변성을 유지하는 코드

// 객체에서 불변성 유지하기
const originalObj = { name: "Alice", age: 25 };
const updatedObj = { ...originalObj, age: 26 }; // 새로운 객체 생성

console.log(originalObj); // { name: "Alice", age: 25 }
console.log(updatedObj);  // { name: "Alice", age: 26 }

// 배열에서 불변성 유지하기
const originalArray = [1, 2, 3];
const updatedArray = [...originalArray, 4]; // 새로운 배열 생성

console.log(originalArray); // [1, 2, 3]
console.log(updatedArray);  // [1, 2, 3, 4]

// 배열의 요소를 수정하면서 불변성 유지하기
const incrementedArray = originalArray.map((num) => num + 1); // 각 요소에 +1

console.log(originalArray);     // [1, 2, 3]
console.log(incrementedArray);  // [2, 3, 4]

그렇다면 왜 불변성을 유지해야하는지?

코드의 안정성과 예측 가능성을 높이기위해

• 상태 추적과 디버깅이 쉬워집니다: 불변성을 유지하면 이전 상태가 그대로 남아 있어, 변화 과정을 추적하고 오류를 찾는 데 유리합니다.
• 리액트와 같은 라이브러리의 효율적인 렌더링: 불변성 덕분에 리액트는 참조만 비교하여 상태 변화를 쉽게 감지할 수 있어 성능이 향상됩니다.
• 사이드 이펙트 방지: 객체나 배열이 외부 함수에서 예기치 않게 변경되는 것을 방지하여 안정성을 높입니다.
• 예측 가능한 코드 흐름: 데이터가 변경되지 않으므로 코드의 흐름을 쉽게 예측할 수 있습니다.

immer 라이브러리란?

• 자바스크립트에서 불변성을 쉽게 유지할 수 있도록 도와주는 라이브러리
• 직접 원본을 복사해서 사용하지 않아도 불변성을 유지하도록 해줌
• 기존 상태를 초안으로 만들어 수정한 후, 자동으로 불변 상태를 생성하는 것

immer 장점

• 가독성: 직접 불변성을 유지하려는 복잡한 코드 대신, produce 함수를 통해 간결하게 상태를 업데이트할 수 있습니다.
• 자동 불변성: Immer는 수정된 상태와 불변성을 자동으로 관리해 주므로 코드 작성 시 실수를 줄여줍니다.
• 리액트와의 호환성: 리액트의 상태 관리에 자주 사용되며, 불변성을 유지하면서도 직관적으로 상태를 업데이트할 수 있습니다.

immer 사용버

import produce from "immer";

const initialState = { age: 25 };

const nextState = produce(initialState, draft => {
  draft.age = 26; // 직접 수정하는 것처럼 작성해도 불변성이 유지됩니다.
});

console.log(initialState); // { age: 25 }
console.log(nextState);    // { age: 26 }