선언적 프로그래밍 ? 리액트 ?

정성연·2022년 8월 9일

React 명령형 프로그래밍 선언적 프로그래밍 추상화

선언적 프로그래밍이란 ?

흔히들 검색하면 나오는, 선언적 프로그래밍은 "어떻게" 보다 "무엇"을 나타내야하는지를 프로그래밍적으로 표현한다고 한다.

선언적 프로그래밍이 기본적으로 "좋다"라는건 알겠는데 뭐가 좋은걸까 ?

가장 먼저 선언적 프로그래밍과 대비되는 명령형프로그래밍의 차이를 알아보자

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

어떻게(HOW)는 명령형 프로그래밍에 가까운 방식.

무엇을(WHAT) 나타내야 하는지는 선언적 프로그래밍 방식.

~~프로그래밍 언어보다 한국말이 어려운건 나뿐일까~~

실생활에서의 예시를 하나 들어보자.

당신이 회사에서 팀장자리에 있다. 당신의 팀원에게 업무를 맡겨야 하는 상황이다. 업무는 사용자에게 프로모션 메일을 보내야 하는 일 이다.

명령형 접근 방식(HOW):
"OO님 디자인팀에서 디자인해준 페이지를 기반으로 페이지를 만든다음에, 데이터베이스에서 전체 유저 리스트에 대해, AWS ses를 통해 메일을 보내는 스크립트를 만들어 실행해주세요."

선언형 접근 방식(WHAT):
"OO님 프로모션 메일 보내주세요."

웹 페이지에서 동작을 기반으로 하나더 예를 들어보겠습니다.

header, body와 같이 태그를 이용하는 것은 어떻게 화면에 보여질 지를 작성하는 것이 아닌, 무엇을 화면에 보여주어야 하는지를 작성하는 것입니다.

위에서 기본적으로 선언형 접근 방식이 동작하기 위해서는 프로모션 메일을 보내는 방법을 알고 있어야 하며, HTML기반의 코드가 브라우저에서 렌더링 하는 방법을 알고 있어야 한다.

선언형 프로그래밍에서는 내부적으로는 절차적 알고리즘이 동작하고 있다. 이는 절차적인 명령형알고리즘이 추상화 되어서 선언형 프로그래밍으로 제공되는 것을 볼 수 있다.

리액트에서의 선언적 프로그래밍

리액트 공식 문서를 보면 리액트는 선언적 프로그래밍 방식이라고 한다.
https://ko.reactjs.org/

리액트와 바닐라JS를 이용한 코드를 비교하여 어디가 선언적이라고 하는지 비교해보자.

<ul id=”list”></ul>

<script>
var arr = [1, 2, 3, 4, 5]
var elem = document.querySelector("#list");

for(var i = 0; i < arr.length; i ++) {
  var child = document.createElement("li");
  child.innerHTML = arr[i];
  elem.appendChild(child);
}
</script>

위 코드는 바닐라JS를 이용한 절차적 프로그래밍이다.

const [arr, setArr] = useState([1, 2, 3, 4, 5]);
return (
  <ul>
    {arr.map((elem) => (
      <li>{elem}</li>
    ))}
  </ul>
);

위 코드는 리액트의 JSX문법을 이용한 선언적 프로그래밍이다.

리액트는 내부적으로 JSX문법을 자바스크립트로 변환하여 실행시키는 한단계 추상화된 문법이다.

목표 (Object):
여기서 li 태그로 6번째 자식 엘리먼트를 추가하려면 ?

명령형 접근 방식(HOW):
바닐라 자바스크립트에서는 appendChild 를 이용해 한번 더 엘리먼트를 추가 해주어야 한다.

선언형 접근 방식(WHAT):
하지만 리액트에서는 arr의 값만 변경시켜주어도 6번째 엘리먼트를 추가 할 수 있다.

이처럼 리액트에서는 원하는 목표 (Object) 를 위해 Data만 변경 시켜주어도 우리가 원하는 결과를 얻을 수 있는 것을 알 수 있다.

리액트, 선언적 프로그래밍의 장점

위의 경우면 보더라도, 명령형프로그래밍보다는 선언적 프로그래밍이 가독성과 유지보수 측면에서 좋다 라는 것을 알 수 있다.

1. 가독성, 유지보수
appendChild또는 removeChild 통해 엘리먼트를 추가 삭제해주는 것보다, setArr 함수를 통해 배열의 값을 변경하면 화면에 반영되는 방식이 더 이해하기 쉽지 않은가 ?

2. 예측가능하고 디버깅이 쉽다
위의 바닐라JS 에서는 대략 6개의 변수가 사용되었지만, 리액트를 이용한 코드에서는 2개의 변수만 사용되었습니다. 이처럼 변수가 많이 사용된다는 것은 코드를 읽을 때 변수에 어떤 값들이 저장되어있는지 트래킹을 하고 있어야 함을 의미하며, 이는 디버깅을 어렵게 만듭니다.

이처럼 선언적 프로그래밍을 하게 되면 상태를 내부적인 구현에 맡기게 됨으로 예측가능하고 디버깅이 쉬운 코드를 작성 가능하도록 도와줍니다.

3. 추상화된 선언형프로그래밍은 재사용되기 쉽다.
선언형 프로그래밍인 리액트는 내부적인 구현을 다르게 만들어 웹에서도 사용될 수 있고, React-Native 에서도 사용 될 수 있습니다.