선언형 프로그래밍, 명령형 프로그래밍
명령형 프로그래밍(Imperative) - How
프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. 즉, 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다.
how to solve it
즉, 어떻게(How) 그것을 해결할 것인가에 관심이 있다.
선언형 프로그래밍(Declarative) - What
프로그램이 무엇을(What) 해야할지를 나타내는 경우를 선언형이라고 합니다. 예를들어 웹페이지에서 화면을 나타낼 때 어떤 방법으로 페이지를 나타내야 하는지 보다 제목, 본문, 그림 등과 같이 무엇을 화면에 나태내야 할지 고민하는 것이 선언형 프로그래밍이다.
또한 프로그램이 함수형 프로그래밍 언어, 논리형 프로그래밍 언어, 제안형 프로그래밍 언어로 쓰인 경우 선언형 프로그래밍이라고 한다.
예시로 더 자세히 알아보자!
길을 가다가 낯선 사람이 나에게 근처 맥도날드가 어디있는지 묻는다면 어떻게 이야기할까? (난 맥도날드 위치에 대해 알고 있는 상태)
명령형 방식: 여기 횡단보도 건너셔서 100m 조금 더 가시다가 우회전하시고 200m 정도만 가시면 있을 겁니다.선언형 방식: 맥도날드는 xx동 xx로 xx길 xx에 있습니다.
위 에서 이야기한대로 명령형은 어떻게 가는지에 대해서, 선언형은 어떤 곳을 가야할지를 이야기 했다.
하지만 여기서 의문이 들 수도 있다 "아니 주소만 알려주면 어떻게 찾아가지?" 라는 생각이 들 수가 있는데 여기에 숨겨진 가정이 있다.
낯선 사람은
핸드폰을 가지고 있고,네이버 지도가 켜진 상태이다.
이러한 가정으로 인해 주소만 알려줘도 됐던 것이다.
우리가 편하게 읽을 수 있게 JavaScript 코드로 작성해보자.
// 배열에서 짝수만 골라서 리턴하는 함수
// 명령형 방식
function filterEven(arr) {
let results = [];
for (let i = 0; i < arr.length; i++){
if(arr[i] % 2 === 0) {
results.push(arr[i]);
}
}
return results;
}
// 선언형 방식
function filterEven(arr) {
return arr.filter((item) => item % 2 === 0);
}두 함수는 배열을 파라미터로 받아 짝수만 반환하는 기능을 한다. 명령형 방식에서는 짝수를 추출하기위한 과정을 설명하는 식으로 작성되었다. 하지만 선언형 방식은 JavaScript Array.prototype.filter()를 사용하여, 무엇에만 집중하여 작성되었다. 즉, 내부가 어떻게 되어있는지 모르지만 그것을 신경쓸 필요가 없다.
이러한 선언형 프로그래밍은 결과물에 집중하고, 복잡한 과정을 추상화하여 신경쓰지 않는다.
그럼 React에서는?
function RenderCookie() {
return (
<div>
<h1>Chocolate Cookie</h1>
</div>
)
}React에서는 위와 같이 선언형 방식으로 컴포넌트를 개발하도록 안내하고 있으며, 이에 따라 React에게 내가 그리고 싶은 UI를 React Element들의 묶음들로 선언해서 React에게 전달하면, React는 실제 이 선언을 화면에 그리기 위한 작업들을 수행합니다. 이 과정을 통해 자연스럽게 DOM에 화면을 렌더할 책임이 개발자에게서 React로 넘어오게 되며 이는 DOM을 조작해서 UI를 화면에 그리는 작업에 대해 Inversion of Control (IoC)인 제어권 역전이 되었다라고 의미합니다.
Last updated