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

React의 특징 중 하나에 선언형이 있다. 선언형은 무엇을 의미할까?

React 선언형

 

프로그래밍 패러다임은 프로그램을 작성할 때의 관점을 의미한다. 우리가 아는 객체지향도 프로그래밍 패러다임 중 일부이다.

 

• 명령형 프로그래밍 (파스칼, C)
• 선언형 프로그래밍 (SQL, 프롤로그)
• 구조적 프로그래밍 (파스칼, C)
• 객체지향 프로그래밍 (자바, C++)
• 함수형 프로그래밍 (하스켈, 리스프)
• 객체기반 (자바스크립트, 에이다)
• 이벤트 드라이븐 프로그래밍
• 절차적 프로그래밍

 

오늘은 명령형 프로그래밍과 선언형 프로그래밍에 대해서 알아보자. 아래 그림은 역사적인 관점에서 분류를 나타낸것이라서 절대적은 아니다. 

 

프로그래밍 패러다임

명령형 프로그래밍(Imperative programming)과 선언형 프로그래밍(declarative programming) 역시 프로그래밍 패러다임의 한 종류이다. 명령형 프로그래밍은 선언형 프로그래밍과 반대되는 개념이다. 

 

명령형 프로그래밍(Imperative programming)은 어떤 방법(How)으로 할것인지에 가깝다. 알고리즘을 명시하지만 목표는 명시하지 않는다.  명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다. 또한, 프로그램의 제어 흐름을 설명하기 위해 제어문을 사용한다. ( 제어 흐름은 프로그램이 정답에 이르기까지의 경로를 뜻한다. )

 

• 무엇을 할지 세세하게 지정한다.

 

function double (arr) {
    let result = [];
    for (let i=0; i<arr.length; i++) {
        result.push(arr[i] * 2)
    }
    return (result);
}

 

 

 

선언적 프로그래밍은 무엇인가(What)를 작업하기 위한 방법을 정의하는 것을 의미한다. 제어 흐름을 설명하지 않고 계산 논리에 집중하는 프로그래밍 패러다임이다.

 

• 결과만 기술할 뿐 어떻게는 기술하지 않는 프로그래밍 방법
• 의도에 집중한 프로그래밍 방법

 

function double (arr) {
    return (arr.map(x => x * 2));
}

 

< React 선언형 >

React의 JSX를 사용해서 비선언형적인 부분을 캡슐화해서 명령형 프로그래밍 언어를 선언형 프로그래밍으로 만들어주었다.

아래와 같이 작성할 수 있는 코드를 

<ul id=”list”></ul>
<script>
var arr = [1, 2, 3, 4, 5]
var elem = document.querySelector("#list");

for(var i = 0; i < arr.length; i ++) {
  var child = document.createElement("li");
  child.innerHTML = arr[i];
  elem.appendChild(child);
}
</script>

React에서 표현하면 다음과 같다.

...
const arr = [1, 2, 3, 4, 5];
return (
  <ul>
    {arr.map((elem) => (
      <li>{elem}</li>
    ))}
  </ul>
);
...

이때 위에 보이는 태그들은 JSX 문법이고, 자바스크립트로 치환된다. 예시로, <li>{elem}</li> 부분은 사실 아래와 같이 치환된다.

...
const arr = [1, 2, 3, 4, 5];
return (
  <ul>
    {arr.map((elem) => (
      React.createElement('li', null, `${elem}`)
    ))}
  </ul>
);
...

우리는 JSX를 통해 유사 HTML 코드안에서 map 함수를 이용하여 선언적으로 프로그래밍 할 수 있다. 

이제 마지막줄의 의미가 이해가 간다. 

 

- 참고

subscription.packtpub.com/book/application_development/9781788996648/4/ch04lvl1sec20/functional-programming

Functional programming - Mastering High Performance with Kotlin

github.com/CodeSoom/functional-javascript

CodeSoom/functional-javascript

 

에서 끝났으면 좋았겠지만, 6월 16일이되서야 선언적의 의미를 이해했다.

https://toss.im/slash-21/sessions/3-3

실무에서 바로 쓰는 Frontend Clean Code

클린 코드에 대한 동영상이었는데 우선, 클린코드는 짧은 코드가 아닌 로직을 빠르게 찾을 수 있는 코드이고, 이때 선언적 프로그래밍을 통해 해결 할 수 있다.

 

선언적 프로그래밍은 "무엇을 해야할지만 알려줘, 세부 구현은 미리 해놨거든"이라고 말할 수 있는 flow다.

 

흔히 함수 이름 형태에서 무엇을 해야할지를 요약하고, 세부구현을 가린다. 선언적 프로그래밍을 할때 다음을 고려하면 더 좋다.

 

- 응집도: 하나의 목적을 가진 코드를 뭉치자.

- 단일책임: 함수가 한가지 기능을 하도록 하자.

- 추상화: 함수의 세부구현 단계를 일치시키자.

 

이제.. 우리.. 모두.. 클린코드를 작성해보자.