선언형 프로그래밍 Declarative & 명령형(절차형) Imperative 프로그래밍

선언형 프로그래밍과 명령형 프로그래밍을 구분하는 가장 큰 기준은 절차, 문제를 해결하는 과정의 표현 유무인 것 같습니다.

명령형 프로그래밍의 경우 논리의 흐름을 따라 절차를 하나 하나 밟아 가며 어떻게 문제를 해결하는지에 대한 접근이 중심이고,

선언형 프로그래밍의 경우 원하는 것이 무엇이다. 가 중심이고 과정은 생략됩니다.

선언형에서 절차는 없어진 것이 아니라 추상화된 것이고, 절차를 생략함으로써 효율적이 됩니다.

- '가장 효율적인 선언적 프로그래밍 방법은 명령적으로 작성된 코드를 추상화하는 것이다'

- 많은 선언적(Declarative) 접근 방식들의 기반에는 일종의 '명령적(Imperative) 추상화'가 존재한다.

코드예시.

1. 숫자 배열을 받아서, 해당 배열의 모든 원소들을 두 배 시킨
새로운 배열을 리턴하는 'double'이라는 이름의 함수를 작성하세요.

ex) double([1, 2, 3]) // [2, 4, 6]

- 명령형(절차형) 프로그래밍

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

-선언형 프로그래밍

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

2. 숫자 배열을 받아서, 해당 배열의 모든 원소들을 더한 값을 리턴하는 'add'라는 함수를 작성하세요.

ex) add([1, 2, 3]) // 6

- 명령형(절차형) 프로그래밍

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

- 선언형 프로그래밍

function add (arr) {
  return arr.reduce((prev, current) => prev + current, 0)
}

3. Vanilla Javascript를 이용해서, btn이라는 id를 가진 엘리먼트에 이벤트 리스너를 달아보세요.

해당 버튼을 클릭했을 때 highlight라는 class를 toggle(add or remove)해야 하고,

엘리먼트의 현재 상태에 따라 버튼의 텍스트를 'Add Highlight'와 'Remove Highlight'로 바꿔야 합니다.

- 선언전 프로그래밍

<Button>
  onToggleHighlight={this.handleToggleHighlight}
  highlight={this.state.highlight}>
    {this.state.buttonText}
</Button>

예시로 살펴본 명령형 프로그래밍의 특징은 어떤 일을 어떻게 처리하는지에 관해 설명하고 있다는 것 입니다. 코드가 존재하는 맥락을 고려해가며, 해당 코드들을 인터프리터처럼 한 줄 한 줄 살펴봐야 합니다.

선언형 프로그래밍의 경우 어떻게 처리할지보다, 무엇을 원하는지를 설명합니다.

(코드를 통해 map과 reduce라는 메소드 내부가 어떻게 구현되어있는지 알 수 없습니다). 변경들은 map과 reduce 내부에서 추상화되어있습니다. 마지막 문제의 Button 컴포넌트를 보면, 해당 UI가 어떤 식으로 보일지를 빠르게 알아챌 수 있습니다.

선언적 코드들은 최종적인 목표가 무엇인지에 대해서만 관심이 있지, 해당 목표를 이루기 위한 세부적인 단계들은 신경쓰지 않습니다. 그래서 동일한 코드들이 다른 프로그램에 쓰이더라도 정상적으로 동작할 수 있게 됩니다.

명령형 코드들은 재사용이 어려운 경우가 많은데, 그 이유는 대부분의 명령형 코드들이 현재 상태의 컨텍스트에 의존적이기 때문입니다.

선언적 프로그래밍은 절차적 구현을 추상화함으로써 이루어진다는 것.

최대한 독립적이고 재사용성이 높은 함수들을 구현하여, 해당 함수들의 조합으로 프로그래밍을 구성하면 전체 코드의 유지보수가 쉬워지고 가독성도 높아집니다.

선언형은, 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해줍니다.

프로그래밍 패러다임. 객체지향 프로그래밍과 함수형 프로그래밍. (0)	2022.11.02

Goddemi