리액트가 선언형 프로그래밍인 이유?

명령형 프로그래밍(Imperative Programming)과 선언형 프로그래밍(Declarative Programming)은 두 가지 주요 프로그래밍 패러다임이다

 

명령형 프로그래밍

"어떻게(How)" 작업을 수행해야 하는지를 명시적으로 세부적으로 기술한다

명령어들이 순차적으로 실행되며, 각 단계에서 상태를 변경하는 방식으로 동작한다

특정 작업의 세부적인 제어가 필요한 경우에 더 적합하다

 

예시: C, Java, Python과 같은 대부분의 프로그래밍 언어, 절차적 프로그래밍

let string = 'THis is the midday show with Cheryl Waters';
let urlFriendly = "";

for(let i = 0 ; i < string.length ; i++){
    if(string[i] === " "){
        urlFriendly += "-";
    }else{
        urlFriendly += string[i];
    }
}

console.log(urlFriendly);

 

선언형 프로그래밍

프로그램이 "무엇(What)"을 하는지를 명시하며 "어떻게(How)"를 상세하게 정의하지 않는다.

함수, 메서드, 컴포넌트로 선언

상태 변경에 대한 추상화 수준이 더 높아서 코드가 더 간결하고 이해하기 쉽다

 

예시:  SQL, 리액트(React)와 같은 UI 라이브러리이다

 

const string = 'This is the midday show with Cheryl Waters';
const urlFriendly = string.replace(/ /g, '-');

console.log(urlFriendly);

 

 

이렇게 보니 선언형 프로그래밍에 대해 다음과 같이 정리할 수 있었다.

1. 선언형 프로그래밍은 원하는 결과물에만 집중하고, 그 과정에 대해서는 추상화를 통해 깊게 알려하지 않는다.
2. 명령형 프로그래밍보다 한눈에 코드가 더 잘 읽힌다. 명령형 프로그래밍의 경우 인간 컴파일러 마냥 한 줄 한 줄 코드를 읽어나가면서 앞으로 어떤 일이 발생할지에 대해 예측한다. 반면 선언형 프로그래밍의 경우 방법은 잘 모르겠지만 어떤 일이 발생할 지 한 순간에 예측 가능하다.
3. 즉, 선언적 프로그래밍이 더 읽기 쉽고 예측이 쉽다.

 

리액트 JSX

리액트의 JSX는 비 선언적인 부분의 캡슐화를 통해, 명령형 프로그래밍적인 부분을 선언형 프로그래밍적으로 바꾼다.

 

JSX의 문법 자체가 선언형 프로그래밍이라기보다는, JSX를 통해서 우리는 컴포넌트를 표현하고 이 컴포넌트를 사용하는 쪽에서는 <ReviewPage /> 이렇게 쓰게 된다. 

그렇다면 코드를 읽는 개발자는 return 부분을 쭉 보면서 '아 ReviewPage 컴포넌트의 내부 로직을 자세히는 모르겠지만, Review와 관련된 페이지구나!'라고 이해할 수 있다. 이런 점에서 JSX는 선언형 프로그래밍이라고 보는 것 같다