중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
해당 글은 모두의 노코드에 남겨진 질문을 소재로 작성했습니다.
1. 기본 개념 이해하기
a. default State
생성한 모든 요소(페이지, 컨테이너, 텍스트 등)는 state를 지니고 있습니다. 해당 요소가 지닌 변수 값이라고 생각하면 됩니다. 페이지에 존재하는 요소를 dynamic value로 불러올 때, 뒤따라서 불러올 수 있는 ”…‘s width”나 “…’s height”가 대표적인 state입니다. 이들은 각각 해당 요소의 width와 height state입니다.
b. Custom state?
State는 크게 (1) default state와 (2) custom state가 존재합니다. (1)은 앞서 다룬 width, height 같이 생성된 요소가 기본적으로 갖는 state입니다.
이번에 알아볼 건 쌈@뽕한 (2) custom state입니다. 해당 state는 저희가 직접 생성 및 설정하는 state입니다. 이렇게 설정한 state를 조건 값으로 활용해 다양한 로직을 쉽게 처리할 수 있습니다.
예를 들어 페이지에 버튼이 3개가 있는데 여기서 유저가 어떤 버튼을 클릭했는지를 state 값으로 지정할 수 있습니다. 그리고 condtion으로 state를 활용해 클릭버튼에 따라서 다른 그룹 요소를 보여주거나 디자인 스타일을 바꾸는 등 다양하게 활용할 수 있습니다. Custom state에 대한 공식 문서는 아래서 확인항 수 있습니다.
2. 클릭한 버튼에 따라 다른 스타일 작용하기
a. 원리 이해하기
클릭한 버튼에 따라 다른 스타일을 적용하는 원리는 (1) 어떤 버튼을 클릭했는지를 나타내는 state를 지닌 요소를 지정하고 (2) 버튼 요소의 codntion에 앞선 요소의 state를 활용하면 됩니다.
b. 페이지에 custom state 지정하기
Custom state는 모든 요소에 등록할 수 있다. 다만, 저 같은 경우는 페이지 요소에 주로 custom state를 설정합니다. 그래야 나중에 다시 찾을 때 편하기 때문입니다. 만약 그룹 요소에 설정한다면, 나중에 어떤 요소에 custom state를 설정했는지 까먹어서 하나하나 다 뜯어봐야 할 수도 있습니다. 사실 이건 과장이고 요소 설정 창에서 확인항 수 있습니다
페이지 요소 설정 창을 띄우고, 우측 상단의 i 버튼을 클릭합니다. 그러면 inspector 창이 나오고, 여기서 페이지 요소가 지닌 custom state를 확인할 수 있습니다.
여기서 custom state를 추가합니다. 이때 타입을 지정해야 하는데, 클릭한 버튼의 이름을 저장하기 위해 text로 설정하면 됩니다.
c. 버튼 요소에 condition 적용하기
이제 버튼 요소를 생성하고, conditional 탭에서 조건을 추가합니다. 조건 선택지로 페이지 요소를 선택하면, 해당 페이지 요소가 지닌 default state가 먼저 나오고, custom state를 그 다음에 확인할 수 있습니다.
해당 custom state를 불러온 후, 현재 버튼 이름일 때 작동되도록 설정합니다. 그리고 background style 등을 자유롭게 설정하면 됩니다.
d. 클릭 버튼에 따라 Custom state 변경하기
마지막으로 버튼을 클릭했을 때, 앞선 페이지의 click_button state의 값을 변경하면 됩니다. 해당 버튼을 클릭할 때 작동하는 워크플로우를 생성합니다. 그리고 set state of an element 액션을 추가합니다
Custom state를 지닌 페이지 요소를 선택하고, 생성한 click_button state를 선택합니다. 그리고 변경할 값을 입력합니다. 이제 워크플로우가 작동되면 해당 custom state 값이 변경되고, 앞서 설정한 버튼 요소의 조건이 실행됩니다
3. 왜 custom state인가?
a. 사용 범위가 무궁무진합니다
Custom state를 쓰는 영역은 매우 다양합니다.
•
해당 예시처럼 특정 요소의 스타일을 변경시키는 조건 값으로 사용
•
임시적으로 특정 데이터를 저장하는 용도로 사용. 가령, custom state의 타입을 테이블로 지정해 특정 레코드를 임시 저장할 수 있습니다.
•
특정 워크플로우의 조건 값으로 사용해 여러 케이스를 대응
•
등등
b. 더 빠릅니다
Custom state를 기반으로 하지 않고, 모든 동작을 워크플로우로 지정한다면 유저 입장에서 서비스 속도가 느린 느낌을 받을 수 있습니다. 워크플로우는 유저가 트리거를 작동한 시점부터 동작해 순차적으로 액션을 처리합니다. 반면, custom state는 트리거 작동 없이 동작하기에 속도가 더 빠릅니다
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
