명령형 UI, 선언형 UI

안녕하세요.

 

이번엔 명령형 UI와 선언형 UI의 개념이 뭔지 알아볼게요.

(전 여기 유툽 영상으로 개념 이해하는데 도움이 많이 되었어요. 영상 보시는 것도 추천드려요!)

 

---

많은 분들이 UIKit은 명령형 UI이고 SwiftUI는 선언형 UI라는 것은 알고 계실 거예요.

 

그럼 명령형 UI가 뭐고 선언형 UI가 뭘까요? 

 

명령형 UI와 선언형 UI가 뭔지 알아보기 전에 우선 명령형 프로그래밍과 선언형 프로그래밍을 알면 좋겠죠?

 

 

> 👨‍💻 : 명령형 프로그래밍, 선언형 프로그래밍이 뭐야?

> 🖥️ : 명령형 프로그래밍은 어떤 일을 어떻게(How) 할지 명령하는 것이고, 선언형 프로그래밍은 무엇을(What) 해야 하는지 시키는 것이야.

 

> 👨‍💻 : 그럼 명령형 UI, 선언형 UI는 뭐야?

> 🖥️ : 명령형 UI는 UI를 어떻게(How) 구성할지, 선언형 UI는 어떤(What) UI를 그릴지 선언하는 방식을 말해.

 

> 👨‍💻 : 아하..... 그게 뭔 소리야;;;

 

 

명령형의 키워드는 How이고 선언형의 키워드는 What 인데요.

 

두루뭉술하게는 이해했는데 정확하게 무슨 의미인지는 이해가 잘 가지 않았어요.

 

 

아래 내용을 보면 이해하기 좀 편해요.

 

보통 UI라고 하면, UI의 상태(state)가 있고 상태값에 따라서 UI가 달라져요.

 

이때 명령형 UI는 상태값 변화에 대한 이벤트를 받아서 각 이벤트마다 적절한 UI를 업데이트해줘야 합니다.

 

즉, 상태값이 많아지면 많아질수록 받아야 하는 이벤트도 많아지니 그에 따라 코드도 길어지고 관리 비용도 커지게 되죠.

 

하지만 선언형 UI는 상태값 변화에 따라서 UI를 통째로 다시 그립니다.

 

물론 os가 알아서 그리는 것이기 때문에 코드도 짧고 관리 비용이 추가로 들지 않는 특징이 있어요.

 

 

여기서 UIKit과 SwiftUI 코드를 비교해 보면 약간 더 감이 잡힙니다.

 

'Click' 이란 버튼을 누르면 버튼이 'Clicked!'라고 바뀌는 간단한 UI를 구성한다고 했을 때 아래처럼 구현할 수 있어요.

UIKi	SwiftUI

UIKit은 UIButton을 화면에 배치하고 버튼 이벤트를 받아서 버튼 text를 직접 변경해주고 있습니다.

 

반면에 SwiftUI는 버튼을 만들고 버튼이 눌렸을 때 상태값만 바꿔주고 있습니다. 바뀐 상태값에 대해서 UI를 다시 그리는 건 os에 맡기구요.

 

같은 UI를 만들어도 코드가 어떤 패러다임이냐에 따라 이렇게 달라지네요ㅎㅎ

 

 

참고로, Flutter에선 선언형 UI에서의 UI는 상태(state)를 화면에 그린 것이라고 정의하고 있는데 이것도 많은 의미를 담고 있는 것 같으니 알아두면 좋을 것 같아요.

https://docs.flutter.dev/data-and-backend/state-mgmt/declarative

 

 

# 참고

- https://www.youtube.com/watch?v=dLwEGT01S6E

 

---

이번 글은 여기서 마무리.