ArkTS로 현대적인 UI 개발하기: HarmonyOS 5.0+의 선언형 문법

카테고리

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

서브카테고리

앱 개발

대상자

• HarmonyOS 앱 개발자, TypeScript/React Native 개발자
• 중급 이상의 프론트엔드 개발자
• 분산 앱(Distributed App) 개발에 관심 있는 개발자

핵심 요약

• ArkTS는 TypeScript 기반의 선언형 UI 언어로, SwiftUI와 React Native의 장점을 결합한 분산 앱 전용 언어
• @State를 사용한 상태 관리, Column/Row 레이아웃, Button 이벤트 처리를 통한 재사용 가능한 컴포넌트(Counter) 구현
• @State 생략 시 UI 갱신 실패, 화살표 함수 사용이 필수적인 공통 실수 및 해결 방법 제공

섹션별 세부 요약

1. ArkTS 개요

• HarmonyOS 5.0+에서 제공하는 TypeScript 기반 선언형 UI 언어
• SwiftUI + React Native의 핵심 기능을 통합한 분산 앱 개발 전용 언어
• @State를 사용하여 상태 변경 시 자동으로 UI 재렌더링

2. Counter 컴포넌트 구현

• @State count: number = 0으로 상태 정의
• Text, Button을 사용한 UI 구성
• onClick() 이벤트 핸들러로 상태 업데이트
• Column(), Row()를 통한 레이아웃 구성

3. IndexPage에서의 사용 예

• Counter 컴포넌트를 import하여 사용
• Text로 제목 표시, Counter 컴포넌트를 100% 너비/높이로 설정
• margin, fontSize 등 스타일링 속성 적용

4. UI Preview 결과

• "Welcome to ArkTS Counter" 제목 + Count: 0 표시
• -/+ 버튼 클릭 시 count 값 증감
• 상태 변경 시 자동 재렌더링

5. 주요 실수 및 해결 방법

• @State 생략 시 UI 갱신 실패 → @State 추가
• onClick() 메서드에서 화살표 함수 사용 필수
• Counter 컴포넌트 export 누락 시 'Counter not found' 에러
• alignItems, justifyContent 누락 시 레이아웃 정렬 실패

결론

• @State, Column/Row, Button 사용법을 중심으로 ArkTS의 핵심 패턴 학습
• 분산 앱 개발을 위한 다음 단계로 다기기 지원 기능 탐구 권장
• @State 및 화살표 함수 사용이 반응형 UI 개발의 핵심