불변 업데이트 패턴
새 복사본을 만들어 데이터를 업데이트합니다.
불변 업데이트 패턴은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
변경하지 않고 업데이트하기
불변 업데이트는 변경 사항이 적용된 새로운 copy를 만들어 original은 그대로 둡니다. 이것이 최신 JavaScript에서 예측 가능한 state 관리의 핵심입니다.
전개 연산자 ...가 주요 도구입니다.
전개 연산자로 객체 copy하기
객체를 새로운 객체에 전개한 다음 속성을 덮어씁니다. original은 이전 값을 그대로 유지합니다.
const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };
console.log(user.age);
console.log(older.age);서로 다른 객체입니다
copy는 동일한 참조가 아니라 완전히 새로 만든 객체입니다. 동일성 비교로 이를 확인할 수 있습니다.
const original = { x: 1 };
const copy = { ...original };
console.log(original === copy);
console.log(original.x === copy.x);불변 방식으로 속성 추가하기
필드를 추가하려면 이전 객체를 전개하고 새 key를 포함하세요. original에는 아무것도 추가되지 않습니다.
const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };
console.log(point);
console.log(point3d);불변 방식으로 속성 삭제하기
구조 분해를 사용해 원하지 않는 key를 꺼내고 나머지를 저장하세요. 나머지 객체에는 해당 key가 포함되지 않습니다.
const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;
console.log(safe);
console.log(user.secret);전개 연산자로 배열 copy하기
배열을 전개해 copy하세요. map과 filter 같은 메서드도 원본을 변경하지 않고 항상 새 배열을 반환합니다.
const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);
console.log(nums);
console.log(doubled);불변 방식으로 배열에 추가하기
변경을 일으키는 push 대신 전개 연산자로 새 배열을 만드세요. original의 길이는 그대로 유지됩니다.
const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];
console.log(list);
console.log(added);
console.log(prepended);불변 방식으로 배열에서 삭제하기
filter를 사용해 원하지 않는 항목이 없는 새 배열을 만들면 original을 그대로 유지할 수 있습니다.
const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);
console.log(nums);
console.log(withoutThree);중첩 객체 업데이트하기
중첩된 업데이트에는 변경하려는 각 수준에서 전개 연산자를 사용해야 합니다. 실제로 건드린 분기만 다시 만들어지고 나머지는 참조로 공유됩니다.
const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);배열의 항목 업데이트하기
map을 사용해 조건에 맞는 항목은 변경된 copy로 반환하고 나머지는 original로 반환하세요. 어떤 요소도 변경되지 않습니다.
const todos = [
{ id: 1, done: false },
{ id: 2, done: false }
];
const updated = todos.map(t =>
t.id === 2 ? { ...t, done: true } : t
);
console.log(todos[1].done);
console.log(updated[1].done);불변 업데이트가 중요한 이유
공유 state를 절대 변경하지 않으면 변경 감지가 저렴해지고(참조 비교), 실행 취소와 다시 실행을 사용할 수 있으며, 원인이 멀리 떨어진 변경으로 발생하는 오류를 막을 수 있습니다. 패턴은 다음과 같습니다. copy한 다음 copy를 변경합니다. 깊은 복제는 다음 수업에서 structuredClone을 다룹니다.
function setName(state, name) {
return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);빠른 확인
user에 이미 age가 있을 때 { ...user, age: 37 }은 무엇을 생성하나요?
복습: 불변 업데이트 패턴
변경하지 않고 업데이트하는 방법을 배웠습니다.
{ ...obj, key: value }처럼 전개해 copy하고 덮어씁니다.- 나머지를 구조 분해해 속성을 불변 방식으로 삭제합니다.
push/splice대신map,filter, 배열 전개를 사용합니다.- 중첩 업데이트에서는 각 수준에서 전개하고 나머지는 참조로 공유합니다.
자주 묻는 질문
“불변 업데이트 패턴” 강의는 무료인가요?
네 — “불변 업데이트 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“불변 업데이트 패턴”에서 뭘 배우나요?
새 복사본을 만들어 데이터를 업데이트합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“불변 업데이트 패턴” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.