선언적 프로그래밍 vs 절차형 프로그래밍
선언적 프로그래밍과 절차형 프로그래밍은 서로 대비되는 대표적인 패러다임이다. 두 패러다임의 차이를 알아보고, 각 패러다임에 해당하는 언어와 Vue/React의 특징을 살펴보자.
선언적 프로그래밍(Declarative Programming)이란?
무엇(What)을 할 것인가에 집중하는 프로그래밍 방식
선언적 프로그래밍은 어떻게(How) 가 아닌 무엇(What) 을 원하는지를 기술합니다. 즉, "이것을 해줘" 라고 선언만 하면 내부적인 로직이나 과정은 신경 쓰지 않아도 됩니다. 대표적인 예로 SQL, HTML, React(JSX), 함수형 프로그래밍 언어 등이 있습니다.
예시: JavaScript + React (선언적 방식)
function App() {
return (
<ul>
{["사과", "바나나", "딸기"].map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);
}
위 예제는 "리스트를 렌더링하라"는 결과를 선언하고 있으며, DOM을 직접 조작하지 않습니다.
절차형 프로그래밍(Procedural Programming)이란?
어떻게(How)를 할 것인가에 집중하는 프로그래밍 방식
절차형 프로그래밍은 명령어들의 순서, 즉 로직의 흐름을 단계적으로 정의합니다. 프로그램은 순차적으로 실행되며, 변수와 상태의 변경을 통해 원하는 결과를 만듭니다. 대표적인 언어로는 C, Python의 일반적인 코드 스타일, JavaScript의 전통적인 사용 방식 등이 있습니다.
예시: JavaScript (절차형 방식)
const fruits = ["사과", "바나나", "딸기"];
const ul = document.createElement("ul");
for (let i = 0; i < fruits.length; i++) {
const li = document.createElement("li");
li.textContent = fruits[i];
ul.appendChild(li);
}
document.body.appendChild(ul);
이 코드는 리스트를 만들기 위해 순서대로 조작할 DOM 요소와 변수를 직접 다룹니다.
주요 차이점 비교
| 항목 | 선언적 프로그래밍 | 절차형 프로그래밍 |
|---|---|---|
| 관점 | 무엇을 할 것인가 | 어떻게 할 것인가 |
| 초점 | 결과 중심 | 단계 중심 |
| 코드 길이 | 상대적으로 짧고 명확 | 길고 상세한 로직 필요 |
| 유연성 | 추상화 높음, 재사용 용이 | 상태 변경과 흐름 제어에 강함 |
| 예시 언어 | SQL, HTML, React, Vue | C, Java, Python, JavaScript |
선언적 프로그래밍의 장점과 단점
장점:
- 코드가 간결하고 읽기 쉬움
- 유지보수가 용이함
- 버그 발생 가능성 낮음 (상태 변경 최소화)
단점:
- 내부 동작을 제어하기 어려움
- 낮은 수준의 최적화가 어려움
절차형 프로그래밍의 장점과 단점
장점:
- 제어 흐름을 세밀하게 설정 가능
- 낮은 수준에서 최적화 가능
- 하드웨어와 가까운 작업에 유리
단점:
- 코드가 장황해지고 버그 발생 가능성 증가
- 상태가 복잡해지기 쉬움
언제 어떤 방식을 선택해야 할까?
UI 개발, 데이터 선언 등에서는 선언적 방식이 더 적합합니다. (React, Vue 등)
복잡한 알고리즘, 파일 처리, 게임 엔진 등에서는 절차형 방식이 효과적입니다.
하지만 대부분의 실전 개발에서는 두 스타일이 혼합되어 사용된다. 특정 문제를 해결하기 위해 가장 적절한 방식을 유연하게 선택하는 것이 중요하다.