• 명령형 방식은 "어떻게" 할 것이지 집중 How
• 선언형 방식은 내가 "무엇을" 원하는지에 더 집중 What

일상의 예시

나는 스타벅스에 가야한다

• 명령형 방식 (HOW) : 주차장 북쪽 출구를 나와 왼쪽으로 가세요. 12번가 출구에 도착할 때까지 15번 북쪽 도로를 타세요. 이케아를 끼고 우회전하세요. 직진하여 첫 번째 신호등에서 우회전 하세요. 다음 신호등을 지나 좌회전을 하세요. 우리 집은 #298입니다.
• 선언형 방식 (WHAT) : 내 주소는 98 West Immutable Alley, Eden, Utah 84310입니다.

수동 스틱과 오토 스틱 자동차

• 수동 스틱(1종) 자동차는 명령형 방식
• 오토 스틱(2종) 자동차는 선언형 방식

선언형 방식만으로는 동작이 되지는 않는다

• 선언형 방식이 제대로 동작하기 위해서는 명령형으로 "어떻게"가 구현된 것들이 추상화되어 있어야 합니다.
• 예를 들어 스타벅스를 간다고 하면 주소만 알아도 스타벅스로 갈 수 있는 방법 (이를 테면 지도 앱을 가지고 있다던지 자동차가 있다던지 )을 다 알고 있다고 가정한다
  • 이미 알고 있다고 가정하기 때문에 무엇을 원하는지 에 대해서만 관심을 갖는다

개발의 예시

• 일상적으로 개발 API 써서 하는 개발들이 죄다 선언형이다

// 배열을 파라미터로 받고 각 요소들의 값에 2를 곱하는 함수 
// 명령형
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)
}

• 이미 map에 다 추상화되어 명령형으로 구현되어 있고 나는 map 하고 싶다고 선언만 하면된다
• 나는 map이 어떻게 구현되어 있는 지 몰라도 map의 스펙만 읽고 그것이 원하는 것이면 그냥 쓰면된다

// 명령형인 제이쿼리 문법
$("#btn").click(function() {
     $(this).toggleClass("highlight") 
    $(this).text() === 'Add Highlight' ?
     $(this).text('Remove Highlight') : $(this).text('Add Highlight') 
})

// 선언형인 리액트 JSX문법
<Btn 
onToggleHighlight={this.handleToggleHighlight}
highlight={this.state.highlight}> 
    {this.state.buttonText}
</Btn>

• 리액트의 jsx문법은 선언형으로 되있어서 어떤 DOM을 원하는지만 딱 추상화시켜서 선언하면 세부사항은 리액트가 알아서 다 해준다

선언형의 장점