최신 웹 개발 트렌드는 리액트에서 함수형 컴포넌트의 사용을 적극 권장하고 있다. 이에 따라, 과거 클래스 컴포넌트에서 널리 사용되던 데코레이터의 사용 빈도가 점점 감소하고 있다. 함수형 컴포넌트는 훅(Hook)을 통해 상태 관리, 사이드 이펙트 처리 등을 할 수 있으므로, 데코레이터를 사용할 필요성이 크게 줄어들었다.
디렉토리에 tsconfig.json가 없다면 $ tsc --init
```tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"experimentalDecorators": true // Add this code
...
},
...
}
typescript 5.0 이상부터 Decorator를 기본적으로 지원하지만 아직 실험적이므로 코드 추가 해야 함
Decorator는 ES10이상 지원하는 브라우저에서만 사용 가능 함
function Logger(target: Function) {
console.log("Logging...");
console.log(target);
}
@Logger
class Person {
name: string = "Max";
constructor() {
console.log("Creating person object");
}
}
const pers = new Person();
// Logging...
// [class Person]
// Creating person object
추후 학습 후 추가 예정