[CS] 선언형 프로그래밍이란

1. 인사

안녕하세요. 이번에는 선언형 프로그래밍에 대해 소개해볼까 합니다.

React를 사용함에 따라 선언형 프로그래밍이란 말은 종종 들었지만 해당 용어에 대한 의미를 정리 하진 않았습니다.
이제는 정리할 때가 된 것 같아 이렇게 글을 작성해봅니다.

---

2. 선언형 프로그래밍이란?

선언형 프로그래밍이란 프로그램의 논리를 "무엇을" 할지 명시하는 방식으로, "어떻게" 할지는 구체적으로 명시하지 않는 프로그래밍 패러다임입니다.

즉, 선언적 프로그래밍이란 추상화 레벨이 높은 프로그래밍을 일컫습니다.

---

3. React와 선언형 프로그래밍

제가 주로 사용하는 React 또한 선언형 프로그래밍 방식을 사용합니다.

어떤 것이 선언형 프로그래밍이고, 또 React에서 이를 어떤식으로 사용하는지 이해하기 위해 명령형 프로그래밍인 vanillaJs와 비교를 해보겠습니다.

• UI Rendering

// vanilla js

const container = document.createElement('div');
const title = document.createElement('h1');
const text = document.createTextNode('Hello');
title.appendChild(text);

if (isLoggedIn) {
  const userInfo = document.createElement('span');
  userInfo.innerHTML = userName;
  title.appendChild(userInfo);
}

container.appendChild(title);
document.body.appendChild(container);

DOM을 직접 조작하는 각 단계를 명시.

// React js

function Welcome({ isLoggedIn, userName }) {
  return (
    <div>
      <h1>
        Hello {isLoggedIn && <span>{userName}</span>}
      </h1>
    </div>
  );
}

결과적으로 어떻게 보여야 하는지"만 정의.

• DOM 조작

// vanilla js
document.getElementById('count').innerHTML = count

직접적인 DOM 조작

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

직접적인 DOM 조작 대신 상태 변경으로 UI 업데이트

---

4. 선언형 프로그래밍 장점

1. 코드의 가독성을 높인다
2. 유지 보수를 용이하게 한다.
3. 프로그램의 추상화 레벨이 높아져 코드의 일반성과 재사용성이 향상됩니다

---

5. 선언형 프로그래밍 단점

무분별하게 추상화 레벨이 높아짐에 따라 앞서 말한 장점을 전부 단점으로 소화할 수 있는 것이 단점입니다.

간단한 예시를 살펴보겠습니다.

<Dialog
	title="title입니다."
/>

처음엔 이렇게 간단한 Dialog가 있었다고 가정하겠습니다. 이는 아주 추상화가 잘 되어있습니다.

그 증거로 Dialog의 내부 로직을 드러내지 않고, 내부 로직을 살펴 보지 않아도 title만 잘 넘겨주면 화면에 잘 렌더링 됩니다.

하지만 시간이 지나 Dialog에 이런저런 요구 사항으로 인해 많은 props를 받아야 한다고 가정하겠습니다.

<Dialog
	title="title입니다."
	handleFunction=~
	onSubmit=~
	className=~
    ~~~~
/>

간단하게 4개의 props라면 괜찮지만 이후 요구 사항이 더 늘어나 props를 더 많이 받게된다면, 이전에 말씀드린 바와 같이 재사용성 및 유지보수, 심지어 가독성까지 좋지 않을 수 있습니다.

앞서 말씀드렸던 장점만 보면 선언형 프로그래밍만을 추구할 법 하지만 이렇게 무분별한 선언형 프로그래밍은 오히려 앞으로의 프로그래밍을 힘들게 할 수 있다는 것을 인지하고 사용하면 좋을 것 같습니다.