선언형 프로그래밍 vs 명령령 프로그래밍

UI 렌더링 로직 작성법

리액트로 로직을 작성할 때 상태에 의존하는 방법과 로직을 하나씩 구현하는 방법이 있습니다. 전자가 선언형 프로그래밍, 후자가 명령형 프로그래밍입니다.

선언형 프로그래밍에 의한 구현

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

• 무엇을 할 지에 초점
• 상태(count)에 따라 UI 렌더링

명령형 프로그래밍에 의한 구현

<div id="app">
  <p id="count">Count: 0</p>
  <button id="increase-btn">Increase</button>
</div>

<script>
  const countElement = document.getElementById('count');
  const button = document.getElementById('increase-btn');

  let count = 0;

  button.addEventListener('click', () => {
    count += 1;
    countElement.textContent = `Count: ${count}`;
  });
</script>

• 어떻게 할 지 초점
• DOM을 직접 다룸
• UI 변경사항을 명시적으로 업데이트 해야함

특징

선언형 프로그래밍	명령형 프로그래밍
무엇을 할지에 초점	어떻게 할지에 초점
React 상태를 사용해 간단함	DOM 조작으로 코드가 길어짐
재사용성과 유지보수성이 높음	오류가 발생하기 쉽고 코드가 길어짐

선연형 프로그래밍과 명령프로그래밍의 특징을 정리한 표입니다. 하지만 기술이란게 그렇듯이 한쪽은 무조건 옳고 반대는 무조건 그른게 아니라 상황에 따라 사용하는 도구가 달라집니다.

선언형 프로그래밍은 시스템에 이미 도구들이 존재해서 상태만 알려주면 되는 경우에 사용할 수 있는 프로그래밍 방법론입니다. 반면에 명령형 프로그래밍은 시스템에 사전에 도구가 없는 경우에 택할 수 밖에 없는 방법입니다.

개발자 시스템 전부에 대해 아는 것은 불가능하고 알더라도 필요한 기능이 없는 경우도 있으므로 명령형 프로그래밍을 해야할 때가 있습니다.

하지만 도구가 이미 존재해서 추상화되어 있는 경우에 선언형 프로그래밍을 할 수 있습니다. 리액트는 그런면에서 훅을 통해 선언형 프로그래밍을 할 수 있게끔 지원할 수 있습니다.

데이터베이스에서도 적용된다

데이터베이스를 다룰 때도 선언형 프로그래밍과 명령형 프로그래밍이 나뉩니다. 다음과 같이 데이버테이스에게 어떤 행위를 하라고 알려주면 명령형 프로그래밍입니다.

하지만 다음과 같이 yml을 활용해서 선언형 프로그래밍으로 데이터베이스에게 원하는 동작을 실행시킬 수 있습니다.

물론 데이터베이스는 yml을 이해하지는 않습니다. 하지만 개발자들이 사전에 yml 컴파일러를 만들었기 때문에 내부적으로 yml을 컴파일 해서 데이터베이스에게 풀어 쓴 SQL을 전달하게 됩니다.

결국 선언형 프로그래밍은 추상화를 충분히 활용해서 코드를 관리하자는 관점에서 나온 방법론입니다.

정리

선언형 프로그래밍과 명령형 프로그래밍 모두 상황에 따라 사용할 수 있는 방법론입니다. 하지만 가독성까지 신경을 쓴다면 명령령 프로그래밍을 통해 로직을 구성한 후 다른 동료들이 쉽게 사용할 수 있게끔 선언형 프로그래밍으로 활용할 수 있도록 추상화하는 것을 어떨까요?

 

참고문헌

https://www.dataops.live/the-data-engineers-guide-to-declarative-vs-imperative-for-data#:~:text=The%20key%20difference%20between%20imperative,working%20with%20a%20blank%20slate.

The Data Engineer’s Guide to Declarative vs Imperative for Data