선언적 프로그래밍이란?

선언적 프로그래밍은 코드를 작성할 때 "무엇(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인 것 같다.

이들은 미리 작성해두고, 반복적으로 사용하여 코드 중복을 방지해준다.