자바스크립트에서 불변 데이터와 이벤트 핸들링

07 Nov 2023

javascript

자바스크립트는 동적인 언어로서 데이터의 가변성이 높습니다. 하지만 때로는 데이터를 불변하게 유지하는 것이 중요한데, 이는 코드의 안정성과 예측 가능성을 높여줍니다. 불변 데이터를 유지하는 한 가지 방법은 객체를 변경하는 대신 새로운 객체를 생성하는 것입니다.

불변 데이터의 필요성

불변 데이터를 사용하는 주요 이점은 다음과 같습니다:

예측 가능성: 불변 데이터는 변경할 수 없기 때문에 예측 가능한 동작을 가지며, 의도치 않은 부작용을 방지할 수 있습니다.
성능 개선: 불변 데이터는 변하지 않으므로 데이터를 복사하는 것이 필요하지 않아 메모리 사용량과 처리 속도를 개선할 수 있습니다.
시간 여행: 불변 데이터는 과거 상태를 추적하거나 수정할 수 있으므로, 디버깅이나 상태 관리에 용이합니다.

불변 데이터의 구현

자바스크립트에서 불변 데이터를 구현하는 방법으로는 불변 배열과 불변 객체를 활용할 수 있습니다.

불변 배열

불변 배열은 Array.from()이나 전개 연산자를 사용하여 기존 배열을 복제하고, push()나 splice()와 같은 배열 메소드를 사용하지 않는 방식으로 생성됩니다. 또한, concat()이나 map()과 같은 배열 메소드를 사용하여 새로운 배열을 반환합니다.

const immutableArray = Object.freeze(["apple", "banana", "orange"]);
const newArray = immutableArray.concat("kiwi");
console.log(immutableArray); // ["apple", "banana", "orange"]
console.log(newArray); // ["apple", "banana", "orange", "kiwi"]

불변 객체

불변 객체는 Object.assign()이나 전개 연산자를 사용하여 기존 객체를 복제하고, Object.defineProperty()와 같은 메소드를 사용하여 속성을 변경하지 않는 방식으로 생성됩니다. 또한, 새로운 객체를 반환하는 객체 메소드를 사용합니다.

const immutableObject = Object.freeze({ name: "John", age: 30 });
const newObject = Object.assign({}, immutableObject, { age: 31 });
console.log(immutableObject); // { name: "John", age: 30 }
console.log(newObject); // { name: "John", age: 31 }

이벤트 핸들링

이벤트 핸들링은 웹 개발에서 중요한 부분입니다. 자바스크립트를 사용하여 이벤트를 처리할 때에도 불변 데이터 원칙을 따르는 것이 좋습니다.

불변 데이터를 유지하면서 이벤트 핸들링을 구현하기 위해서는 상태를 변경하는 대신 새로운 상태를 생성해야 합니다. 이를 위해 Object.assign()이나 전개 연산자를 사용하여 상태를 복제하고, 변경된 부분을 조작하는 방식으로 구현할 수 있습니다.

class Counter {
  constructor() {
    this.state = { count: 0 };
  }

  handleClick() {
    const newState = { ...this.state, count: this.state.count + 1 };
    this.setState(newState); // 상태 갱신
  }
}

마무리

불변 데이터와 이벤트 핸들링은 자바스크립트에서 중요한 개념입니다. 불변 데이터를 유지하면 코드의 안정성과 예측 가능성을 높일 수 있으며, 이벤트 핸들링에서도 불변 데이터 원칙을 따르면 좋습니다.