앱 내에 로직을 캡슐화하려면 상태 변수를 사용할 수 있습니다.

상태 변수 생성

Bits AI를 통해 상태 변수 추가하기

1. Build with AI 아이콘()을 클릭합니다.
2. 변수의 사용자 지정 프롬프트를 입력하거나 How can you help me with variables? 프롬프트를 사용해 보세요.

상태 변수를 수동으로 추가하기

1. 앱에서 Data ({ }) 아이콘을 클릭하여 데이터 탭을 엽니다.
2. 더하기(+)를 클릭한 다음 Variable을 선택합니다.
3. (선택 사항) 변수 이름을 클릭하고 이름을 변경합니다.
4. 상태 변수의 초기 값을 정의합니다.

앱 예시

버튼으로 콜아웃 값 구성 요소의 스타일과 값을 변경하는 앱을 만들려면 다음 지침을 따르세요.

변수 생성

1. 앱에서 Data ({ }) 아이콘을 클릭하여 데이터 탭을 엽니다.
2. 더하기(+)를 클릭한 다음 Variable을 선택합니다.
3. 변수 이름을 callout_value로 지정하고 Initial Value를 Pass로 설정합니다.
4. 더하기(+)를 클릭하여 다른 변수를 생성합니다.
5. 이 변수 이름을 callout_color로 지정하고 Initial Value를 green으로 설정합니다.

구성 요소 생성

1. 앱에 콜아웃 값 구성 요소를 추가합니다. 다음 값을 입력합니다.
   • Value: ${callout_value.value}
   • Style: ${callout_color.value}
2. 앱에 버튼 구성 요소를 추가하고 레이블을 Change status로 설정합니다.
3. Events에서 이벤트를 추가합니다. 다음 값을 입력합니다.
   • Event: click
   • Reaction: custom
   • Callback:

     ${ () => {
         if(callout_color.value !== "green"){
             callout_color.setValue("green")
             callout_value.setValue("Pass")
         } else {
         callout_color.setValue("red")
         callout_value.setValue("Fail")
         }
     } }
     

4. Preview를 클릭하면 앱을 미리 볼 수 있습니다.
   앱에서 Change status 버튼을 클릭하면 콜아웃 값 요소의 색상과 텍스트가 녹색 Pass와 빨간색 Fail 간에 전환됩니다.

추가 자료

추가적인 유용한 설명서, 링크 및 기사:

앱 빌드설명서 JavaScript 표현식설명서

질문이나 피드백이 있으신가요? Datadog 커뮤니티 슬랙의 #app-builder 채널에 참여하세요.