[DISCUSSION] 선언형 UI 적용건에 대한 논의

[kimscastle]

선언형 UI를 사용해보자!

왜 갑자기 선언형 UI?

• flexlayout, pinlayout에 관한 블로그 포스팅을 심심치않게 봐왔는데요
• https://okanghoon.medium.com/%EC%83%88%EB%A1%9C%EC%9A%B4-ios-ui-%EA%B0%9C%EB%B0%9C-feat-flexlayout-64d0ca8091a7 (특히 이 글에서 감명을 많이 받았습니다)
• 사실 저는 해당 라이브러리에대한 관심이 없었습니다, 근데 지금 만들고있는 view에서 키보드가 좀 늦게 올라오는거같아 레이아웃이 늦게잡혀서 viewdidappear가 늦게 호출되는건가 싶어서 기존의 autolayout이 느려서 그런줄알았습니다(해보니 그건 아닙니다)
• 그래서 기존의 autolayout보다 3배이상 빠르다는 flexlayout이나 pinlayout을 사용하면 이 문제가 해결되지 않을까라는 생각이들었습니다

실제 벤치마크 결과 pinlayout이나 flexlayout이 3배이상 빠르다고 합니다

• 처음에는 base는 autolayout이지만 최적화를 잘한 라이브러리인줄 알았습니다...ㅎㅎ
• 그런데 좀 알아보니 아얘 메커니즘이 다르더라고요, 좀 더 조사를 해보니 autolayout은 명령형UI 그리고 flexlayout은 선언형UI라고 합니다
• 그래서 지금까지 사용하던 방식이 아닌 선언형UI에 대한 관심이 갑자기 생겨서 이렇게 discussion을 작성하게 되었습니다

명령형 vs 선언형

• 그러면 간단하게 선언형과 명령형의 차이점에 대해서 설명해보겠습니다
• 예를들어서 친구들을 우리집에 초대한 상황이라고 가정해보겠습니다, 친구들에게 우리집을 오는 방법을 선언형과 명령형으로 나눠서 설명해보겠습니다

명령형 설명

잠실역에서 5번출구쪽으로 나와서 환승센터 앞에있는 삼송빵집에서 화장실방면으로 걷다가 8002번버스를타는 곳에서 기다렸다가 버스를 타고 중흥아파트에서 내려서 빠리바게트쪽으로 걸어오다가 나오는 횡단보도를 건너서 바로 좌회전하고 양꼬치집에서 우회전해서 리즈카페라는 곳까지와

선언형 설명

비룡로55번길 5-1로로 지도찍고와

• 선언형 같은 경우는 네비게이션이 알아서 오는 방법을 알려줍니다 유저가 오는 방법까지 자세하게 설명을 해줄 필요가 없죠
• 그러다보니 문법이 간결해집니다...사실 코드리뷰를 할때 UI레이아웃짜는거까지는 안보는데 보통 그 이유가 너무나 많은 정보를 담은 코드로인해 방대해진 코드여서가 아닐까라는생각이듭니다
• 기존에 사용하던 autolayout을 사용하는게 너무 불편하다라는건 다 아실거라고 생각합니다 그래서 사실 snapkit없이는 일일이 autolayout으로 짜는게 힘들고 버겁다고 느껴질만큼 코드양이 많아지죠, 그러나 snapkit도 조금더 편리한 방식을 제공해줄뿐 기본적으로 복잡한상황을 일일히 명령해줘야하는 상황에는 변함이 없다고 생각했습니다
• UI의 레이아웃을 잡는데 있어서 간결하고 직관적인 방식이 있고 그 방식이 앞으로의 트렌드이며 속도도 빠르다면 한번쯤은 시도해봐도 좋을거라고 생각했습니다

Caution

snapkit도 충분히 편한데?라는 의견도 있을 수 있지만 그 의견이 나오게 된 이유도 너무 많이써서 익숙해져서 그런거지 snapkit자체가 편리하게 레이아웃을 잡는 방식을 아니라는 의견을 가지고 discussion을 작성하고있습니다

UIkit에서 선언형UI를 제안하는 이유

• 사실 선언형의 state자체를 가지고 있어야한다라는 개념도 존재하긴합니다

• 위의 스크린샷을보면 버튼을 눌렀을때 버튼의 title이 바뀌는 코드가 스유기준으로 엄청나게 간결하다는걸 알 수 있습니다

• 하지만 제가 생각했을때 스유는 UI코드가 정말 방대해진다는 단점이 있습니다 왜냐면 상태로직을 선언부에 함께 적어줘야하기때문입니다

• 선언형을 제대로쓰려면 스유를 쓰는게 맞습니다, 하지만 현재 상황(UIkit을 사용중)에서 스유로 바꾸자는건 너무나 큰 시간과 노력이 필요합니다. 단순히 선언형을 한번써보겠다고 프레임워크 자체를 바꾸자는건 좀 그렇죠...

• 그리고 기존에 UIkit을 쓰는사람들이 스유가 불편하다고 느끼는건 UI와 로직이 분리가 안되어있어서여도 있습니다. 저도 사실 좀 불편하긴합니다(익숙하지 않아서요) 근데 UIkit에는 보통 UI자체랑 로직을 분리를 하면서 코드를 작성하죠

Important

여기서 snapkit대신 flexlayout을 사용하면 로직부분을 건드릴 필요도 없이 layout을 잡는 코드만 선언형으로 바꿀수있습니다, 스유에서의 불편함없이 선언형을 아주 잘 사용하고 익숙하게 사용할수있는 부분에만 적용이 가능하다는 장점이 있습니다

• UIkit을 통해 명령형 코드와 UI작성이 익숙해진 상황인건 부정할 수 없는 상황이라고 생각합니다, 그리고 앞으로 몇년 후에는 스유가 UIkit보다는 아니더라도 무시할수없을정도의 영향력이 있을거라는것도 부정할 수없는 상황입니다, 마지막으로 우리가 그렇다고 취준하는데 있어서 UIkit도 부족한게 많이 보이는게 스유를 공부하는것도 별로인상황입니다
• 그런 상황이기에 UIkit에서 선언형을 연습할수있는 부분을 통해 선언형 프로그래밍방식을 익숙하게 한다면 UIkit에 대한 연습과 공부 성장을 그대로 하면서 스유에대한 최소한의 준비를 할 수 있다고 생각합니다

---

제안

• 현재 autolayout방식을 그대로 유지하면서 추후에 리팩터링 과정 혹은 1차 릴리즈가 마무리된 후에 flexlayout을 도입해서 적용하며 snapkit대신 flexlayout과 pinlayout을 사용해서 유지보수를 진행해보는걸 제안드립니다

[cchanmi]

1차 릴리즈 후 리팩터링 과정에서 도입해 보는 거 좋습니다
저도 항상 이름만 들어 봤었던 부분인데 디스커션 내용도 읽어 보고, 블로그 글들도 찾아 봤더니 도입하는 데에 큰 어려움도 없어 보이구요
성능 개선 + UIKit에서의 선언형 UI 경험이 큰 메리트로 다가올 것 같아요