컴포넌트 상태
컴포넌트를 화면에서 숨기거나, 필수 입력 창으로 지정하거나, 비활성화 혹은 읽기 전용 모드를 지정할 수 있습니다. 컴포넌트 상태에 대한 개념이 필요하다면 해당 페이지가 도움이 될 수 있습니다.
속성 설명
컴포넌트 상태란?
컴포넌트는 상태 값을 갖습니다. 개발자가 지정한 상태에 따라 컴포넌트들은 다른 특성을 갖습니다. [Dev]-[컨트롤 상태]에서 설정 가능합니다. 또한 로드스크립트도 컴포넌트 상태 제어를 지원합니다.
관련된 로드스크립트에 대한 자세한 설명은 페이지를 참고하세요.
상태 값 종류
활성화(기본)
기본값. 컴포넌트가 시각적으로 보이고, 기능적으로 동작하는 상태
비활성화
시각적으로는 보여지지만, 기능적으로 동작하지 않는 상태
비활성화 모드로 화면상에서 활성화 모드와 다르게 보임
필수 입력
활성화 상태에 필수 입력 조건이 추가된 상태
다음 Step으로 이동 시, 필수 입력에 해당하는 컴포넌트를 검사함.
컴포넌트에 연결된 컬렉션키를 대상으로 값이 있는지를 체크하는 기능. 컬렉션키 연결이 되어있어야 정상 동작
필수입력을 체크하는 대상 섹터가 존재하지 않으면 에러가 발생할 수 있습니다. 이 경우 상위 요소(그룹 또는 레이아웃)을 리로드 하여 섹터를 초기화 시켜주어야 합니다.
필수 입력 기능은 컴포넌트 대상 섹터의 컬렉션키를 대상으로 이뤄지게 됩니다.
따라서 컴포넌트가 화면에 그려진 이후 컴포넌트의 대상 섹터가 삭제되거나 하는 경우, 상위 요소(그룹또는 레이아웃)를 리로드 해야 합니다.
숨기기
화면 상에서 해당 컴포넌트가 숨겨집니다.
필수 체크 기능은 그대로 동작합니다.
읽기전용
수정은 할 수 없고 읽기만 가능한 상태
로드스크립트로 컴포넌트 상태를 지정하는 경우, 컴포넌트별로 지원하는 상태가 다르기 때문에 확인하는 것을 추천합니다.
참고
필수 값 체크하기
Step 컴포넌트의 설정 중 [Event]-[클릭 시 스텝 이동] 체크 시, 이동하는 스텝이 없을 경우 [필수 값 체크하기]토글을 사용하여 필수 값 체크 기능을 켜고 끌 수 있습니다.
해당 기능이 켜져 있다면 Step 이동은 없지만 필수값 체크를 하게 됩니다.
필수 값 체크 무시
만약 이동하는 Step이 존재하는 경우 [필수 값 체크 무시] 토글이 활성화됩니다.
토글이 활성화되어 있다면, 필수 값 체크 없이 Step을 이동할 수 있습니다.
스크립트
이벤트 스크립트를 사용하여 특정 시점에 필수 값을 체크할 수 있습니다.
컨트롤별 상태값 체크리스트
체크된 경우 해당 기능이 동작합니다.
예시
스튜디오 내 UI
Explorer의 [Dev]-[Component] 에서 특정 컴포넌트를 클릭 시 설정할 수 있는 속성입니다.
위 사진은 특정 컴포넌트 상태가 [필수 입력]인 경우의 UI입니다.
활용
필수 입력
필수 입력(체크)와 관련된 활용 예제입니다.
InputText 컨트롤을 필수 입력으로 지정하려고 합니다.
아래 이미지와 같이 InputText를 만든 뒤 데이터를 연결합니다.
만약 컴포넌트와 데이터 연결에 대한 이해가 부족하다면 데이터(Data) 페이지를 참고하세요.
사진에는 a라는 카테고리가 연결되었습니다.
이제 필수입력과 관련된 설정을 해줍니다.
컨트롤 상태를 필수 입력으로 바꾸고 Data영역의 컬렉션키를 입력합니다.
개발이 완료되었습니다. 디버깅 창에서 확인합니다.
만든 InputText에 값이 없을 때 Step을 이동하려고 하면 위 사진과 같이 변합니다.
실행 내역 확인 영역에서 아래와 같은 메세지를 확인할 수 있습니다.
카테고리 a의 password 컬렉션키에 해당하는 값이 없다는 문구입니다.
Last updated
