728x90
선언적 프로그래밍은 코드를 작성할 때 "무엇(What)"을 달성하고자 하는지에 초점을 둔다.
어떻게(How) 달성할지에 대한 구체적인 단계를 명시하지 않고, 원하는 결과를 명확하게 묘사하는 방식으로 코드를 작성한다.
- 선언형으로 작성된 코드는 추상화로 문제를 해결하기에, 재사용성이 높고 사용할때 간결하여 가독성이 높다.
- 각각의 기능을 따로 구현하게 되기 때문에 각 기능의 모듈간 종속성이 낮아져 독립적으로 관리 및 사용이 가능하다.
- 위와 같은 이유들로, 선언적 프로그래밍은 유지보수가 적합한 코드들을 작성할 수 있게 해준다.
React는 선언형 UI 라이브러리로, 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다고 한다.
- 자바스크립트를 이용해 선언적으로 작성한 배열의 모든 값 더하는 코드
const numbers = [1, 2, 3, 4, 5];
// 배열의 숫자를 모두 더하기
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
for문을 사용하여 문제를 해결하면, 각 루프에서 어떻게(How) 문제를 해결하는지 작성하게 되지만, reduce로 작성된 코드는 선언적으로 '배열의 모든 값을 더한다' 라는 행위를 묘사한다.
- React에서 외부의 완성된 기능을 가진 컴포넌트를 선언해 사용하기
import React from "react";
import Timer from "./components/Timer";
function EnglishTest() {
return (
<div>
<h1>1번 문제. is English easy and fun?</h1>
<Timer/>
</div>
);
}
Timer 컴포넌트의 구현, state및 prop, setTimeout등의 기능은 Timer 컴포넌트 내부에 완성되어있다.
사용자가 해야할 일은 Timer 컴포넌트를 가져와 사용하는 일 뿐이며, 이는 선언적 프로그래밍이다.
Timer 컴포넌트가 어떻게 구현되어있는지는 EnglishTest 컴포넌트의 고려사항이 아니다.
- SwiftUI의 DSL
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Hello, SwiftUI!")
.font(.largeTitle)
.foregroundColor(.red)
Button("Click me!") {
print("Button Clicked!")
}
}
}
}
버튼이나 텍스트가 어떻게 구현되어있는지 고려하지 않아도, 선언적 UI를 통해 손쉽게 IOS 앱 화면을 구성할 수 있다.
⚡️ 나 스스로 가장 많이 선언적으로 코드를 작성하게 되는 부분은 역시 React 컴포넌트와 커스텀 Hook인 것 같다.
이들은 미리 작성해두고, 반복적으로 사용하여 코드 중복을 방지해준다.
728x90
'기타' 카테고리의 다른 글
animation 성능 향상 (requestAnimationFrame) (0) | 2023.09.04 |
---|---|
Headless UI란? (0) | 2023.09.03 |
SQL의 DDL, DML, DCL란? (0) | 2023.08.25 |
SSH(Secure Shell)에 대해서 (0) | 2023.08.16 |
nvm 대신 asdf 사용하기 (0) | 2023.08.11 |