Javascript의 함수형 프로그래밍 - 명령형 및 선언형

안녕하세요, 이번 포스트에서는 명령형과 선언형 개념에 대해 이야기하겠습니다. 알지 못하는 사이에 배열을 축소하거나 매핑하려고 시도할 때마다 자바스크립트에서 함수형 프로그래머가 되는 것이 좋습니다. React, Flux, redux는 모두 함수형 프로그래밍 자바스크립트 프레임워크입니다.
이제 선언적(Declarative)에 대해 이야기하면, 애플리케이션이 어떻게 발생해야 하는지 정의하는 것보다 발생해야 할 일을 설명하는 데 우선순위를 두는 방식으로 구조화될 때입니다.
여기에서 명령형 및 선언적 예를 비교하면 더 쉬울 것입니다.

var string = "hi there , I'm a web developer";
var removeSpace = "";
for (var i = 0; i < i.string.length; i++) {
  if (string[i] === " ") removeSpace += "-";
  else removeSpace += string[i]; 
}
console.log(removeSpace);

이 예에서는 문자열의 모든 문자를 반복하여 공백이 발생할 때마다 교체합니다. 코드만 보면 별 의미가 없습니다. 명령은 코드를 이해하기 위해 많은 주석이 필요합니다. 선언적 프로그램에서 구문 자체는 어떤 일이 일어나야 하는지를 설명하고 일이 어떻게 일어나는지에 대한 세부 사항은 추상적인 방식으로 설명됩니다.

const string = "Hi there, I'm a web developer ";
const removeSpaces = string.replace(//g,"-");
console.log(removeSpaces);

이것이 더 읽기 쉽고 추론하기 쉬워 보이지 않습니까?
이제 문서 객체 모델 또는 DOM을 구축하는 작업을 살펴보겠습니다. 명령형 접근 방식은 DOM이 구성되는 방식과 관련이 있습니다.

var headline = document.createElement('h1');
headline.innerText = "Hello World";

DOM이 명령적으로 구성된 곳에서 변경하거나 기능을 추가하거나 10,000줄의 코드를 확장하는 것은 매우 어려울 것입니다.
이제 React 구성 요소를 사용하여 선언적으로 DOM을 구성하는 방법을 살펴보겠습니다.

const { render } = ReactDOM
const Welcome = () => (
<div id="App">
//your HTML code 
//your react components
</div>
)
render(
<App />,
document.getElementById('home')
)

React는 선언적입니다. 여기에서 Welcome 구성 요소는 렌더링되어야 하는 DOM을 설명합니다. 그만큼
render 함수는 컴포넌트에 선언된 명령어를 사용하여 DOM을 구축하고 추상화합니다.
DOM이 렌더링되는 방법에 대한 세부 정보입니다. 우리는 우리가 우리의
'target'의 ID를 가진 요소에 구성 요소를 환영합니다.