✨[매일매일] 프론트엔드 기술 일기: 불변성(Immutability)이란 무엇인가요? — 개념과 이유, 그리고 실전 예제

프론트엔드 개발을 하다 보면 상태 관리나 데이터 흐름에서 꼭 듣게 되는 개념이 있습니다. 바로 불변성(Immutability)입니다.이번 글에서는 불변성이 무엇인지, 왜 지켜야 하는지, 그리고 어떻게 지킬 수 있는지 쉽게 정리해 보겠습니다.

📖 불변성이란?

불변성(Immutable)이란 데이터가 한 번 생성된 이후에는 그 상태를 변경할 수 없는 성질을 말합니다.

프로그래밍 언어에서 문자열, 숫자처럼 기본 데이터 타입은 불변(immutable)입니다. 예를 들어, 문자열에 새로운 글자를 더하면 실제로는 기존 문자열을 수정하지 않고 새로운 문자열을 만들어 반환합니다.하지만 객체와 배열처럼 참조 타입은 기본적으로 가변(mutable)입니다. 즉, 생성된 객체의 프로퍼티를 언제든지 바꿀 수 있습니다.

const person = { name: “Alice”, age: 25 };

// ❌ 불변성을 깨는 예제 person.age = 26;

위처럼 기존 객체를 직접 수정하면 코드의 예측 가능성이 떨어지고, 디버깅이 어려워질 수 있습니다.

🧾 불변성을 지키려면?불변성을 유지하기 위해서는 기존 데이터를 수정하지 않고, 새로운 데이터(객체나 배열)를 생성해야 합니다.✅ 스프레드 연산자

const updatedPerson = { …person, age: 26 };

✅ Object.assign()

const updatedPerson = Object.assign({}, person, { age: 26 });

✅ Object.freeze()객체를 동결하여 더 이상 수정할 수 없게 만듭니다.

const frozenPerson = Object.freeze(person); frozenPerson.age = 30; // 무시됨

✅ Immutable.js, Immer.js라이브러리를 사용해 더 직관적이고 안전하게 불변성을 지킬 수도 있습니다.

🤔 불변성은 왜 중요한가요?

불변성은 코드의 예측 가능성과 안정성을 높입니다.

🌱 장점데이터의 변경 흐름을 쉽게 추적할 수 있다.디버깅과 상태 관리가 쉬워진다.리액트(React)와 같은 라이브러리에서 shouldComponentUpdate, useMemo, PureComponent 등의 최적화 기법과 잘 맞아 떨어진다.과거 상태를 유지하거나 롤백하기 쉬워진다.​⚠️ 단점매번 새로운 객체를 생성하기 때문에 메모리 사용량이 약간 늘어날 수 있다.하지만 성능에 미치는 영향은 대부분의 경우 무시할 수 있는 수준입니다.

📚 추천 학습 자료✅ [10분 테코톡] 소피아의 데이터타입과 불변성 — 유튜브https://www.youtube.com/watch?v=hM8s3ZaycGk

✅ [evan-moon] 변하지 않는 상태를 유지하는 방법, 불변성(Immutable) — 블로그https://evan-moon.github.io/2020/01/05/what-is-immutable/

변하지 않는 상태를 유지하는 방법, 불변성(Immutable) 이번 포스팅에서는 순수 함수에 이어 함수형 프로그래밍에서 중요하게 여기는 개념인 에 대한 이야기를 해보려고 한다. 사실 순수 함수를 설명하다보면 불변성에 대한 이야기가 꼭 한번은 나오게 되는데, 대부분 “상태를 변경하지 않는 것”이라는 짧은 정의로 설명하거나, 혹은 불변성을 해치는 행위들을 예시로 들고 이런 행위들을 금지 행위로 규정하며 설명을 진행하게된다. 그러나 개인적으로 이런 설명 방식은 상태와 메모리에 대한 개념이 확실하게 정립되지 않은 사람에게 별로 와닿지 않는 방식일 수도 있다고 생각한다. 그래서 이번 포스팅에서는 정확… evan-moon.github.io

🔗 마무리프론트엔드 개발에서는 상태 관리가 중요하고, 상태 관리에서 불변성을 지키는 것이 핵심입니다. 불변성은 코드의 버그를 줄이고 유지보수성을 높이는 좋은 습관이니, 작은 프로젝트에서부터 의식적으로 연습해 보세요.혹시 더 깊이 있는 라이브러리 예제(Immutable.js/Immer.js)나 리액트 상태 관리 사례까지 추가로 보고 싶다면 말씀해 주세요! 🚀

🙋‍♀️ “데이터는 직접 수정하지 말고, 항상 새로 만들어라!”이 한 문장만 기억해도 불변성의 절반은 이해한 것입니다. 🎯