@let을 활용한 Angular 템플릿 변수 선언 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• Angular 템플릿 개발자
• 중급 이상의 Angular 프론트엔드 개발자
• 템플릿 변수 범위 제어와 효율적 코드 작성 방법이 필요한 개발자

핵심 요약

• @let은 Angular 템플릿 내에서 지역 변수를 선언하는 기능으로, let과 유사한 동작을 지원
• 변수는 선언된 범위 내에서만 접근 가능하며, @if, @for 등 블록 내에서 선언 시 외부로 노출되지 않음
• 템플릿 복잡도를 줄이기 위해 @let을 사용하여 async 파이프 등 중복 코드를 제거할 수 있음

섹션별 세부 요약

1. `@let`의 기본 사용법

• @let variableName = value; 형식으로 변수 선언 가능
• 예: @let count = 1; 또는 @let countryList = country$ | async;
• 변수는 선언 후에만 사용 가능하며, @if, @for 등 블록 내에서 선언 시 해당 블록 범위에 제한됨

2. 실무 예제: 국가 목록 템플릿

• @let을 통해 @if와 @for 블록 내에서 변수를 선언 및 활용
• 예:

```html

@let text = 'Hello';

@if (country$ | async; as countryList) {

@for (country of countryList; track $index; let index = $index, ...) {

{{ country.name }}

}

}

```

• @for 블록 내에서 $index, $even, $odd 등 내장 변수를 @let으로 재사용 가능

3. 컴포넌트 데이터와의 연동

• 컴포넌트 ts 파일의 date 값을 @let으로 템플릿 변수에 할당 가능
• 예:

```ts

date = new Date().toDateString();

```

```html

@let time = date;

```

• @let은 @if 또는 @for 블록 외부에서 선언 시 전역 범위로 접근 가능

4. 범위 제한과 오류 사례

• @if 블록 내에서 선언한 @let currentDate = date;은 외부에서 접근 불가
• 예:

```html

@if (true) {

@let currentDate = date;

}

{{ currentDate }}

```

• 변수를 선언 전에 사용 시 Angular 컴파일러에서 오류 발생

결론

• @let은 템플릿 내 중복된 파이프 사용을 줄이고 가독성을 높이는 데 유용
• 변수 선언 위치를 신중히 선택하여 범위 제한에 따른 오류를 방지해야 함
• 전역 범위에서 선언해야 전역적으로 사용 가능한 변수를 생성할 수 있음