Vue를 학습하면서 명령형 프로그래밍과 선언형 프로그래밍을 자세히 알아야 할 필요성을 느꼈다. 특히, 선언형 프로그래밍은 처음 들었으며 웹을 컴포넌트 기반으로 개발할 때의 핵심이라고 생각했다. 따라서 이번 글에서는 명령형 프로그래밍과 선언형 프로그래밍의 차이와 선언형 프로그래밍에 집중할 것이다.
어떻게 vs 무엇을
명령형 프로그래밍은 "어떻게" 할 것인가에 집중을 하고, 선언형 프로그래밍은 "무엇을"에 집중을 한다. 이를 확실히 이해하기위해 택시를 탔을 때 택시 기사의 질문에 각각 어떻게 대답을 하는지 알아보자.
- 택시기사 : "어디로 갈까요?"
- 어떻게 : "500m 직진 후에 사거리에서 좌회전을 합니다. 이후 1km 직진을 하고 삼거리에서 우회전하여 다섯 번째 건물로 갑니다."
- 무엇을 : "백화점으로 가주세요"
위의 질문에 어떻게와 무엇을의 대답을 보면 차이를 알 수 있다.
명령형 프로그래밍은 어떠한 목적을 이루기위해 일련의 과정을 거친다면 선언형 프로그래밍은 어떠한 목적을 위해 무엇을 하는지 작성하는 것이다. 이때 선언형 프로그래밍도 목적을 위해 구현해야하는 로직이 있을 수 있다. 하지만 이미 로직은 포함되어있다고 가정을 하고 목적을 이루려고 한다.
선언형 프로그래밍의 방법 중 하나인 함수형 프로그래밍
함수형 프로그래밍은 정의된 함수들을 조합하여 하나의 값을 구하는 프로그래밍 기법이다. 이는 선언형 프로그래밍이라고 볼 수 있다. 다음은 API 서버에 특정 객체를 받아와 상태를 업데이트하고 렌더링을 하는 함수의 수도코드다.
function getObj() {
get(URL)
update(objs)
render()
}함수 내에서는 "어떻게" 최종적으로 업데이트된 상태를 렌더링하는지 기술하지 않았다. 단지 ["요청을" 보낸다 -> "업데이트를" 한다 -> "렌더링을" 한다] 처럼 "무엇을"에 집중하고 있는 것을 알 수 있다.
선언형 프로그래밍의 이점
그렇다면 자바스크립트 프레임워크에서 선언형 프로그래밍을 추구하는 이유는 무엇일까?
- 독립적인 컴포넌트를 구성하여 재사용과 유지보수가 쉬워진다.
- 상태를 변경할 때 어떤 컴포넌트에서 변경했는지 추적이 쉽다.
- 무엇을 하는지를 기술하기 때문에 가독성이 높다.
이전까지 Vue의 공식문서를 보며 코드를 따라하였는데 "왜 이렇게 작성하는지"를 알 수 있었다.