Declarative and Imperative programming

Delcarative

• 선언형 프로그래밍
• 제어 흐름(control flow)를 설명하지않고 표현하는 프로그래밍 패러다임
• 무엇을 할 것인가와 가깝다.

ex) 친구에게 풍경그림을 요청하는데 친구가 어떤물감을 사용하고 어떤 기법을 사용해서 그림을 그리는지에 대해 상관하지않는경우.

 

Imperative

• 명령형 프로그래밍
• 프로그램의 상태를 변경하는 statement를 사용하는 프로그래밍 패러다임
• 무엇을 어떻게 할 것인가와 가깝다.

ex) 친구에게 풍경그림을 요청하는데 원하는 결과를 얻기위해서 단계별로 그림기법이나 물감에 대해서 알려주는경우.

-  메모리의 내용으로 정의되고 구문들은 기계어의 명령어로 정의되는 대부분의 컴퓨터 하드웨어는 명령형으로 구현되어있다.

 

 

 

선언형 프로그래밍과 명령형 프로그래밍의 실제 예시

 

-명령형 프로그래밍의 예시

const container = document.getElementById(‘container’);
const btn = document.createElement(‘button’);
btn.className = ‘btn red’;
btn.onclick = function(event) {
 if (this.classList.contains(‘red’)) {
   this.classList.remove(‘red’);
   this.classList.add(‘blue’);
 } else {
   this.classList.remove(‘blue’);
   this.classList.add(‘red’);
 }
};
container.appendChild(btn);

-선언형 프로그래밍의 예시

class Button extends React.Component{
  this.state = { color: 'red' }
  handleChange = () => {
    const color = this.state.color === 'red' ? 'blue' : 'red';
    this.setState({ color });
  }
  render() {
    return (<div>
      <button 
         className=`btn ${this.state.color}`
         onClick={this.handleChange}>
      </button>
    </div>);
  }
}

 

두가지의 차이점은 크게 달라보이지 않을수도 있다. 코드에서 둘다 빨강색인지 파랑색인지에 대한 논리를 가지고 있지만 큰 차이가 있는데 선언형 프로그래밍의 예시는 React의 예시로 실제로 요소를 건들지는 않고 현재 state를 렌더링 하는것이고 DOM 자체를 조작하지 않는다.

 

선언형 프로그래밍으로 인한 이점으로는 React를 사용할 때 결과를 어떻게 만들어내는지 생각하지않고 component가 state를 통해서 어떻게 결과를 만들어낼지 생각하는점에서 예측 가능하고 재사용 가능하게 만들어주는 control flow를 만들어 낸다. Redux같은 라이브러리는 이러한 구조를 적용하는데 도움이 된다고 한다.

- 코드의 가독성

- 재사용성

 

 

 

- 피해야할 상황

1. Refs를 사용하지 않기

2. DOM을 직접적으로 건들지 않기

3. Component를 렌더링하는 함수를 반환하는 경우. ->  대신 Compeont를 렌더링하는 필요한 정보를 반환하는 함수를 사용하기.

4. 자식함수들 간 정보를 공유하는 함수 -> 대신 props를 통해서 정보 공유하는 함수 만들기. 그리고 Component는 lifecycle method가 없기때문에 가능하면 Pure function component를 사용하기.

 

codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

Declarative vs Imperative Programming