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

명령형 프로그래밍과 선언형 프로그래밍의 차이점을 예제를 통해 알아봅시다

명령형 프로그래밍

정의

개발자가 원하는 프로그램의 상태에 도달하기 위해
컴퓨터에게 그 과정을 하나하나 명령하는 코딩 방식.

예시

친구에게 부탁하기

“이 지우개를 오른손으로 잡아.
일어나서 20걸음 앞으로 가서,
문을 왼쪽으로 열고 2걸음 앞으로 전진.
왼쪽으로 몸을 틀고 앞으로 40걸음 전진.
왼쪽으로 몸을 틀고 문을 오른쪽으로 열고 10걸음 전진.
오른쪽으로 몸을 틀고 손을 아래로 내린다음에, 펼쳐”

원하는 상태

  • 내 손에 있는 지우개가 철수 손에 있게 됨

double

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

원하는 프로그램의 상태

  • 루프를 돌면서 2씩 곱한 결과 값

add

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

원하는 프로그램의 상태

  • 루프를 돌면서 값을 누적한 값

event handling

$("#btn").click(function () {
  $(this).toggleClass("highlight");
  $(this).text() === "Add Highlight"
    ? $(this).text("Remove Highlight")
    : $(this).text("Add Highlight");
});

원하는 프로그램의 상태

  • 버튼을 클릭했을때 달라진 버튼의 class 값
  • 버튼을 클릭했을때 달라진 버튼의 text 값
  • 버튼을 클릭했을때 달라진 버튼의 class 값

잠깐! text()는 선언형 아닌가요?

그러네요! 다만, 이 예제는 함수 하나하나가 아닌, 전반적인 흐름을 봤을때 명령형 프로그래밍에 가깝습니다.

선언형 프로그래밍

정의

개발자가 개발자가 원하는 프로그램의 상태에 도달하기 위해
추상화된 도구를 사용해 컴퓨터에게 선언하는 방식.

예시

친구에게 부탁하기

“민수야, 2반 철수에게 지우개좀 전달해줘”

원하는 프로그램의 상태

  • 내 손에 있는 지우개가 철수 손에 있게 됨

추상화된 도구

  • 민수의 뇌 + “2반/철수/전달” : 구체적인 몸의 움직임과 이동 경로를 일일이 말하지 않아도 민수의 뇌가 기억에서 자료를 꺼내 경로를 파악하고 팔과 다리에게 일일이 명령을 내린다.

double

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

원하는 프로그램의 상태

  • 루프를 돌면서 2씩 곱한 결과 값

추상화된 도구

  • map: 내부적으로 루프를 어떻게 도는지(i = 0, i += 1..) 명시하지 않아도, 알아서 루프를 돌아주면서 콜백 함수를 실행해준다.

add

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

원하는 프로그램의 상태

  • 루프를 돌면서 값을 누적한 값

추상화된 도구

  • reduce: 내부적으로 루프를 어떻게 도는지 명시하지 않아도, 알아서 루프도 돌고 누적값도 유지해준다.

event handling

<Btn
  isHighlight={this.state.buttonText}
  onToggleHighlight={this.handleToggleHighlight}>
    {this.state.buttonText}
</Btn>

원하는 프로그램의 상태

  • 화면에 보여지는 버튼
  • 버튼을 클릭했을때 바뀌는 state 값
  • 상태에 따라 달라지는 class 값
  • 상태에 따라 달라지는 버튼의 text 값

추상화된 도구

  • babel: 브라우저가 이해하는 javascript로 어떻게 바꿀지에 대한 설명이 없어도 바벨이라는 도구를 쓰면 알아서 javascript로 바뀐다.
  • <Btn>(컴포넌트): onToggleHighlight에 넣은 함수를 언제 호출하고, highlight값에 따라서 this.state.buttonText값을 변경하고 에 this.state.buttonText를 어디에 보여줄지 내부적으로 정의가 되어있다.
  • react : this.handleToggleHighlight로 상태값(this.state)를 변경하면 알아서 re-rendering이 되고 버튼 text가 바뀐다
  • this.handleToggleHighlight: 버튼을 클릭했을때 상태를 어떤값으로 바꿀지 일일이 명령하지 않아도 알아서 바뀐다. handleToggleHighlight 이 함수로 추상화 했기 때문.

참고

Leave a Reply

Your email address will not be published.