React 공식문서는 React로 선언형 UI를 구성할 수 있다고 말한다.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
여기서 말하는 선언형(Declarative)이란 무엇을 의미할까? 반대로 명령형(Imperative)란 무엇일까?
왜 React 는 선언형 UI가 더 코드가 예상가능하고 디버깅이 쉽다고 할까?
왜 명령형에서 선언형 UI로 흐름이 바뀌었을까?
선언형(Declarative) vs 명령형(Imperative)
선언형
- 명시적으로 control flow를 나타내지 않고 프로그램이 무엇(What)을 하는지를 묘사하는 프로그래밍 패러다임
SELECT * FROM users WHERE id <= 100SQL을 통해 database에서 원하는 데이터를 가져올 수 있다. 여기서 중요한 포인트는 어떻게 데이터를 가져올지SQL 엔진에 완전히 위임된다. 즉, 개발자는 어떻게 데이터를 가져올지 모른다는 것이다.
Haskell, SQL과 같은 선언형 프로그래밍 언어는 개발자로부터 명령형 로직을 추상화한다. 개발자는 명령형 로직을 고민하지 않아도 된다는 뜻이다.
명령형
- 각각의 명령을
step by step으로 나타내어 프로그램이 어떻게(How) 동작하는지 묘사하는 프로그래밍 패러다임 - C, C++, Java 등의 언어가 있다.
Javascript, scala와 같은 multi-paradigm언어는 명령형, 선언형 코드 모두 작성할 수 있다.
선언형 UI란?
- UI 상태들 사이의 전이를 어떻게(how) 프로그래밍할 것인지에 대한 개발자들의 부담을 덜기 위해 개발자들이 현재의 상태만을 묘사하고 상태 변화는 프레임워크에 맡기도록 한다. 참고
- 즉, 개발자는 현재 상태로 무엇을 보여줄지만 프로그래밍하고 상태 변화가 발생했을 때 프레임워크에서 UI를 다시 그리도록 한다. 이것이 선언형 UI이다.
- SwiftUI, Jetpack Compose, React native, Flutter 등이 선언형 UI 프레임워크이다.
- React에서는 Virtual DOM을 이용하여 선언형 UI를 가능하도록 한다.
명령형 UI란?
- UIView와 같은 완전한 기능을 가진 UI 개체를 일일이 구성하고 나중에 UI가 바뀔 때 메서드와 setter를 이용해서 UI를 바꾼다.
- 예를 들어 안드로이드의 XML layout으로 UI를 구성하는 것이 있다.
왜 선언형 UI인가?
- 선언형 UI는 개발자의 생산성을 증가시키고 더 적은 코드로 빠르게 app을 개발할 수 있도록 한다.
참고
https://increment.com/mobile/the-shift-to-declarative-ui/#authors
https://aidenybai.com/thoughts/virtual-dom
https://dev.to/ruizb/declarative-vs-imperative-4a7l
