토글 버튼에 대한 고찰) 토글 버튼을 이용해 좋아요, 북마크 추가 기능 구현 시 중요하게 고려 해야 하는 것

토글 버튼(Toggle Button)

토글 버튼은  사용자가 두 상태(Check ON, Check OFF)간 설정을 서로 전환할 수 있는 UI 컴포넌트이다. 사용자에게 두가지 상태 중 하나의 옵션만 제공해야 하는 경우 토글 버튼을 커스텀해서 구현하면 Check ON/ Check OFF라는 Check 상태의 Change에 대한 이벤트를 구현할 수 있다.

토글 버튼은 위의 이미지처럼 토글 버튼은 주로 옵션을 ON/OFF하는 스위치 형태로 흔히 볼 수 있다. 이외에도 좋아요, 북마크 버튼 등 여러가지 기능에 활용되고 있다.

 

토글 버튼(Toggle Button)의 특징

• ON / OFF 두 개의 상태를 가지고 있다.
• OFF 상태의 버튼을 누르면 ON으로 전환되고, ON 상태의 버튼을 누르면 OFF로 전환된다.
• 사용자가 ON / OFF 상태를 자유롭게 변경할 수 있다. 그래서 ON / OFF 전환이 딜레이 없이 작동한다.

 

토글류 이벤트

토글 버튼, 스위치 등 토글류 UI는 Check 상태가 변경되면 setOnCheckedChangeListener가 실행되어 변경된 Check 상태를 Boolean값으로 콜백해준다. setOnCheckedChangeListener를 통해 Check 상태 변경에 대한 이벤트 동작을 처리할 수 있다.

toggleButton.setOnCheckedChangeListener { v: CompoundButton, isChecked: Boolean ->
}

만약 토글 버튼을 커스텀하여 좋아요 버튼을 구현하고, 버튼의 Check 상태에 따라 좋아요 기능을 구현한다고 하면

likeButton.setOnCheckedChangeListener { _: CompoundButton, isChecked: Boolean ->
    if(isChecked) addLiked() else deleteLiked()
}

이런 식으로 좋아요 기능에 대한 로직을 구현할 수 있을 것이다.

이렇게 토글 버튼을 이용하면 토글버튼의 체크 상태 변화 이벤트 리스너 함수를 이용해 '좋아요' 기능의 추가/제거 대한 로직을 쉽게 구현할 수 있다.

 

좋아요 기능을 구현할 때, setOnCheckedChangeListener를 이용해 구현 후 끝내도 될까?
간과해버린 중요한 한 가지가 있다.
사용자가 토글 버튼을 여러번 누를 수 있음을 인지해야한다.

 

주의사항 

토글 버튼은 사용자가 ON / OFF 상태를 자유롭게 변경할 수 있고, ON / OFF 전환이 딜레이 없이 작동한다. 그리고 ON / OFF 전환이 이루어질 때마다 check 상태가 true -> false로 바뀌면서 check 상태 값(Boolean)에 대한 콜백 함수가 계속 실행된다. 

좋아요 버튼을 누르는 이벤트가 발생 했을 때 어떤 일이 일어나는지 시나리오를 생각해보자.

• 버튼의 상태가 ON(true) → OFF(false)로 바뀌거나 OFF(false) → ON(true)로 변경된다.
• 버튼의 상태가 변경되면 변경된 상태에 따라 서버에서 비즈니스 로직을 수행한다.
• 서버와의 비즈니스 로직을 수행하기 위해 네트워크 통신을 비동기적으로 수반하게 된다.

이 과정에서, 좋아요 버튼을 누를 때마다 네트워크 통신이 버튼을 누른 횟수만큼 호출된다.

 

 

 

단추 아이콘 제작자: Freepik - Flaticon