개요
이 문서는 MobX를 사용하여 메모이제이션 및 캐싱 패턴을 구현하는 방법을 설명합니다. 메모이제이션은 함수의 결과를 캐싱하여 동일한 입력에 대해 함수를 다시 실행하지 않고 캐시된 결과를 반환하는 기술입니다. MobX는 상태 관리 라이브러리로서, 효율적인 상태 업데이트와 필요한 경우에만 리렌더링을 수행할 수 있는 메모이제이션 및 캐싱 기능도 제공합니다.
MobX를 사용한 메모이제이션 패턴
@computed데코레이터를 사용하여 계산된 속성을 만듭니다. 이 계산된 속성은 의존하는 값이 변경될 때마다 자동으로 재계산됩니다.
import { observable, computed } from 'mobx';
class MemoizationExample {
@observable inputValue = '';
@computed get uppercaseValue() {
return this.inputValue.toUpperCase();
}
}
const example = new MemoizationExample();
console.log(example.uppercaseValue); // 결과: ''
example.inputValue = 'hello';
console.log(example.uppercaseValue); // 결과: 'HELLO'
-
MobX는 자동으로 의존성을 추적하기 때문에 결과가 의존하는 값이 변경되지 않으면 계산된 속성을 다시 계산하지 않습니다.
```javascript example.inputValue = ‘hello’;
console.log(example.uppercaseValue); // 결과: ‘HELLO’
example.inputValue = ‘hello’; console.log(example.uppercaseValue); // 결과: ‘HELLO’ (재계산하지 않음)
example.inputValue = ‘world!’; console.log(example.uppercaseValue); // 결과: ‘WORLD!’
## MobX를 사용한 캐싱 패턴
1. `@computed` 데코레이터와 함께 `@observable`을 사용하여 캐시할 값을 선언합니다.
```javascript
import { observable, computed } from 'mobx';
class CachingExample {
@observable inputValue = '';
@observable.cached
get cachedUppercaseValue() {
return this.inputValue.toUpperCase();
}
}
const example = new CachingExample();
console.log(example.cachedUppercaseValue); // 결과: ''
example.inputValue = 'hello';
console.log(example.cachedUppercaseValue); // 결과: 'HELLO'
-
@observable.cached데코레이터는 결과를 캐싱하고, 의존하는 값이 변경되지 않으면 이전에 계산된 값을 반환합니다.```javascript example.inputValue = ‘hello’;
console.log(example.cachedUppercaseValue); // 결과: ‘HELLO’
example.inputValue = ‘hello’; console.log(example.cachedUppercaseValue); // 결과: ‘HELLO’ (이전 결과를 반환)
example.inputValue = ‘world!’; console.log(example.cachedUppercaseValue); // 결과: ‘WORLD!’ ```
결론
MobX를 사용하면 메모이제이션과 캐싱 패턴을 쉽게 구현할 수 있습니다. @computed 데코레이터를 사용하여 계산된 속성을 선언하고, @observable.cached 데코레이터를 사용하여 캐시된 값을 만들 수 있습니다. 이를 통해 불필요한 계산과 리렌더링을 피하고, 성능 향상을 이끌어낼 수 있습니다.
참고 자료: