계산 속성
계산 속성은 반응형 데이터에서 새로운 데이터를 파생시키는 방식이며, 의존하는 데이터의 변화에 따라 자동으로 업데이트됩니다. ofa.js에서 계산 속성은 proto 객체에 정의된 특별한 메서드로, JavaScript의 get 또는 set 키워드를 사용하여 정의합니다.
특징과 장점
- 캐싱성: 계산된 속성의 결과는 캐시되며, 의존하는 데이터가 변경될 때만 다시 계산됩니다.
- 반응성: 의존하는 데이터가 업데이트되면 계산된 속성이 자동으로 업데이트됩니다.
- 선언형: 선언 방식으로 의존 관계를 생성하여 코드가 더 명확하고 이해하기 쉬워집니다.
get 계산 속성
get 계산 속성은 반응형 데이터에서 새로운 값을 파생하는 데 사용되며, 매개변수를 받지 않고 다른 데이터를 기반으로 계산된 값만 반환합니다.
계산 속성 countDouble의 값: {{countDouble}}
실제 응용 시나리오 예시
계산 속성은 복잡한 데이터 변환 로직을 처리하는 데 자주 사용됩니다. 예를 들어 배열 필터링, 텍스트 서식 지정 등이 있습니다.
- {{$data}}
set 계산 속성
set 계산 속성은 할당 작업을 통해 기본 데이터 상태를 수정할 수 있게 해줍니다. 이는 하나의 매개변수를 받으며, 일반적으로 의존하는 원본 데이터를 역방향으로 업데이트하는 데 사용됩니다.
기본 값: {{count}}
두 배 값: {{countDouble}}
계산 속성 vs 메서드
비록 메서드도 비슷한 기능을 구현할 수 있지만, 계산된 속성은 캐싱 특성을 가지고 있어 의존하는 데이터가 변경될 때만 다시 평가되므로 성능이 더 우수합니다.
// 계산된 속성 사용(권장) - 캐시 있음
get fullName() {
return this.firstName + ' ' + this.lastName;
}
// 메서드 사용 - 호출할 때마다 실행됨
fullName() {
return this.firstName + ' ' + this.lastName;
}주의사항
- 비동기 작업 피하기: 계산된 속성은 동기적이고 부작용이 없어야 하며, 비동기 호출이나 컴포넌트 상태를 직접 수정하는 것을 금지합니다.
- 의존성 추적: 반드시 반응형 데이터에만 의존해야 합니다. 그렇지 않으면 업데이트가 예측 불가능해집니다.
- 오류 방지: 계산된 속성 내부에서 순환 의존성이나 비정상적인 할당이 발생하면 렌더링 실패 또는 무한 루프로 이어질 수 있으므로, 반드시 경계 조건을 미리 설정하고 예외 처리를 철저히 해야 합니다.
실제 적용 예시
아래는 계산된 속성의 유용성을 보여주는 간단한 폼 검증 예제입니다:
간단한 검증 예제
상태: {{statusMessage}}