Declarative UI 란?

원문 : https://medium.com/everything-full-stack/declarative-ui-what-how-and-why-13e092a7516f

Declarative UI — What, How, and Why?

 

 

Unsplash 에 있는 Tengyart 의 사진

간단히 말해서, 선언적 코딩은 수행 방법이 아니라 수행해야 하는 작업에 대해서만 프로그램에 지시합니다.

 

무엇?

선언적 UI에 대해 이야기할 때 우리는 먼저 그것이 원하는 결과와 주어진 애플리케이션 상태에서 사용자에게 어떻게 보여야 하는지를 설명하는 데 초점을 맞추는 프로그래밍 패러다임 이라는 것을 알아야 합니다 .

결과를 얻기 위한 실행 단계를 나열하지 않고 원하는 결과만 나열합니다.

반대 프로그래밍 패러다임은 프로그램 상태를 변경하고 UI를 수동으로 변경하는 명령을 나열하는 명령형 UI입니다.

일을 명확하게 하기 위해… 고급 레스토랑에 들어가는 자신을 상상해 보십시오. 여주인이 당신을 환영하고 테이블로 안내하고 메뉴를 가져옵니다. 당신은 그들이 제공하는 요리를 기대하면서 열지만 요리 이름 대신 만드는 과정을 자세히 설명합니다. 예를 들면 다음과 같습니다.

• 중불에서 중간 크기의 냄비에 기름을 붓습니다.
• 기름이 뜨거워지면 마늘을 넣고 1분 정도 익힙니다(타지 않도록 잘 살펴보세요).
• 등 등…

파스타 Arrabiata를 보는 대신 .

기분이 어때??
물론 이런 일은 절대 일어나지 않을 것입니다... 하느님 감사합니다!

내가 설명한 시나리오는 원하는 결과가 나올 때까지 단계별로 작업을 수행하는 필수 방법입니다.

대부분의 레스토랑 메뉴는 선언적 접근 방식을 사용하여 요리 이름, 가격 및 일부 재료를 표시합니다.

 

어떻게?

명령형 접근 방식 은 각 UI 요소에 대한 인스턴스를 만들고 최종 디자인에 도달할 때까지 변형을 수행하는 것입니다.

좋은 예는 Android의 XML 레이아웃입니다. 우리는 사용자가 보고 상호 작용할 수 있도록 렌더링되는 위젯과 구성 요소를 디자인합니다.

예를 들어 목록을 설정하는 방법을 간단히 살펴보겠습니다.

• 레이아웃 XML에서 ListView 정의

• ListView 하위 항목(또한 XML) 빌드

• 어댑터 클래스 빌드

이 예에서는 Android에서 제공하는 즉시 사용 가능한 어댑터를 사용했습니다(일부 공간을 절약하기 위해). 그러나 실제 응용 프로그램에서는 이 어댑터를 사용하지 않을 가능성이 큽니다. BaseAdapter 를 확장하는 고유한 어댑터 클래스를 만들고 , 재정의 메서드를 구현하고, 2단계에서 보여준 것처럼 자식 보기 XML과 함께 getView() 내부의 LayoutInflater를 사용해야 합니다. id로 보기를 찾고 관련 항목을 설정하는 동일한 프로세스를 반복합니다. 그들에게 데이터.

• 코드에서 ListView를 찾아 어댑터 인스턴스를 생성합니다.

myStringArray는 어댑터에 필요한 데이터입니다. (자식 요소)

• 어댑터를 ListView에 연결

선언적 접근 방식은 기본 인스턴스에서 시작 하여 변경하는 대신 필요한 모든 설정이 포함된 청사진을 처음부터 지정합니다. 이를 통해 개발자는 수신된 데이터를 기반으로 사용자 인터페이스를 디자인할 수 있습니다.

• Jetpack Compose를 사용하는 Android 예시

MessageRow 는 하위 항목을 표시하는 또 다른 컴포저블입니다.
모두 Kotlin을 사용하고 XML은 사용하지 않습니다!

• 플러터 예시:

message.length(데이터) 에 따라 itemCount를 반복하면 itemBuilder가 각 하위 항목(위젯)을 생성합니다.

그리고 그게 다야! 추가 코드가 필요하지 않습니다.

두 경우 모두 UI를 동적으로 변경할 수 있지만 큰 차이점은 선언적 접근 방식에서 프레임워크가 새 청사진과 일치하도록 모든 것을 다시 그리는 것을 처리한다는 것입니다.

 

왜?

Tikal의 모바일 설계자로서 저는 작은 신생 기업에서 대기업에 이르기까지 많은 프로젝트에서 많은 클라이언트와 함께 일하면서 고전적인 명령형에서 시작하여 선언적 측면으로 전환하는 모든 UI 접근 방식을 탐색했습니다.

다음은 선언적 접근 방식을 사용할 때 고려해야 할 몇 가지 이점입니다.

• 구문이 더 짧고 깔끔하여 개발 프로세스 속도가 빨라집니다.
• 더 적은 코드, 더 적은 버그, 더 쉬운 테스트, 더 쉬운 유지 관리 ;)
• UI와 로직에 동일한 프로그래밍 언어를 사용합니다.
• 여러 위치에서 UI를 수정할 수 없습니다. 이렇게 하면 모든 UI 요소에 대해 올바른 아키텍처와 단일 정보 소스가 보장됩니다.
• UI 요소는 쉽게 재사용되고 함께 구성됩니다.
• 리액티브 프로그래밍을 결합할 때 단일 구성 요소 자체만 렌더링/재구축할 수 있으므로 전체 페이지를 재구축하는 것보다 성능이 향상됩니다.

 

선언적으로 생각하기 시작

모바일 및 웹 개발이 진행되고 점점 더 많은 사람들에게 다가감에 따라 대형 공급업체가 선언적 접근 방식을 지원하는 현대적이고 표현력이 풍부한 프로그래밍 언어로 우리를 밀어붙이는 이유를 알 수 있습니다.

iOS용 SwiftUI

Android용 Jetpack Compose

물론 Flutter 는 모두 선언적입니다.

요즘에는 최신 CPU를 사용하여 UI의 일부를 수정하는 대신 처음부터 재구성하는 것이 좋습니다.

 

결론

우리는 선언적 UI가 무엇이며 왜 인기를 얻고 있는지 살펴보았습니다.
선언적 UI 개념이 대중화됨에 따라 그 방법과 이유를 이해하고 진화 및 최신 업데이트를 추적할 가치가 있습니다.

 

이 글을 읽고 다양한 패러다임을 더 잘 이해하기를 바랍니다.