선언형 UI

오늘 공부하는데 선언형 UI에 대해서 알게 되었다.

 

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('선언형 UI 예시')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  count++;
                });
              },
              child: Text('클릭하세요'),
            ),
            Text('클릭 수: $count'),
          ],
        ),
      ),
    );
  }

 

선언형 UI는 위의 코드와 같이 UI를 선언하면 프레임워크가 이를 분석해서 자동으로 UI를 만들어주는 것을 말한다. 이게 편하다는 것은 알겠다 그렇다면 이전에 사용하던 방식과는 어떤 차이가 있을까.

 

선언형과 비교되는 방식이 명령형 UI이다. 명령형은 말 그데로 UI를 모두 코드에서 명령을 내려야하는 방식이다. 코드로 UI를 모두 짜지 않으면 원하는 UI가 나오지 않는다.

 

	 messageLabel = UILabel()
        messageLabel.text = ""
        messageLabel.textAlignment = .center
        messageLabel.translatesAutoresizingMaskIntoConstraints = false
        
        button = UIButton(type: .system)
        button.setTitle("클릭하세요", for: .normal)
        button.addTarget(self, action: #selector(buttonClicked), for: .touchUpInside)
        button.translatesAutoresizingMaskIntoConstraints = false
        
        // UI 요소 추가
        view.addSubview(messageLabel)
        view.addSubview(button)
        
        // Auto Layout 설정
        NSLayoutConstraint.activate([
            messageLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            messageLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: -20),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: messageLabel.bottomAnchor, constant: 20)
        ])

 

위의 코드는 Swift언어로 짠 명령형 UI의 예시이다. 보면 messageLabel, button등의 요소의 위치, 크기 등을 모두 하나하나 코드에서 명령하고 있다. 이러한 방식은 옛날부터 사용된방식이다.

 

하지만 최근에는 코드를 간결하게 짜려는 트랜드에 맞게 새로운 형식의 UI구성 방식이 나온것이 선언형 UI이다. 위의 두가지 코드를 비교하더라고 선언형이 훨씬 코드가 간결하고, 계층적으로 짜여있어서 보기에도 편하다는 것을 알 수 있다.

 

flutter를 공부하면서 처음에는 몰랐지만 선언형 UI에 대해서 공부를 해보니, Swift를 공부할때보다 훨씬 편한것을 체감할 수 있었다. 여러 언어에서의 최근 프레임워크를 보면 선언형UI를 사용하기위한 것들이 많다. 이러한 점을 보면 선언형UI가 대세인것을 알 수 있다.