선언형 프로그래밍 알고 사용합시다

• 작성자: @Jongho Park
• 작성일: 2021.11.29
• Description: 선언형 프로그래밍에 대한 키워드를 알게 되어 공부한 자료들을 정리해봤습니다

---

명령형 프로그래밍은 무엇을 어떻게 할 것인가에 가깝고, 선언형 프로그래밍은 무엇을 할 것인가에 가깝다.

예를 들면, 다음과 같이 비교할 수 있다.

• 명령형 : "12번 테이블 자리가 비어있다. 나는 저 자리로 걸어가 앉을 것이다."
• 선언형 : "네 명이 앉을 자리를 부탁한다."

선언형 방식이 제대로 동작하기 위해선 명령형으로 "어떻게" 가 구현된 것들이 추상화되어 있어야 한다.

위의 사례도, 네 명이 앉을 자리에 대해 직원이 사람들을 데려가는 절차를 알고 있다고 가정한 것이다.

---

특징

선언형 프로그래밍은 코드의 가독성을 높여준다. (주관적일 수 있음)

명령형에 비해 What 에 집중하기 때문에, 메인 로직을 선언형 프로그래밍 관점에서 작성하면 로직이 더 잘 드러나게 된다.

세부 로직이 어떻게 구현되었는지는 만들어 지는 함수 추상화 아래에 감춰진다.

선언형 프로그래밍은 재사용성을 높여준다.

명령형 코드는 현 상황의 문맥에 의존하기 때문에 재사용하기 어려운 경우가 많다.

선언형 코드는 해당 코드에서 달성하고자 하는 것이 무언인지를 나열하기 때문에 동일 코드를 다른 프로그래밍에서 재사용하기 쉽다.

선언형 프로그래밍은 필연적으로 높은 수준의 추상화가 필요하다.

선언형 프로그래밍의 패러다임 특성 상, 추상화 수준이 낮다면 사소한 작업들을 개발자가 다 컨트롤해야 한다.

따라서 부차적인 작업들을 잘 캡슐화해서 선언적인 방식으로 만들 필요가 있다.

효율적인 선언형 프로그래밍을 위해선, 명령형으로 작성된 코드를 잘 추상화해야 한다.

---

대표적인 사례

React 의 JSX

React 는 렌더링 되는 요소를 JSX 로 표현할 수 있다.

<p>Hello World !</p>

위와 같은 문법은 해당 컴포넌트의 DOM 요소가 어떻게 이루어져있는지, 가지고 있는 값은 무엇인지 알아보기 쉽게 만든다.

반면에 명령형은 다음과 같이 표현해야 한다.

const para = document.createElement('p');
para.innerText = 'Hello World !';

try / catch

try / catch 는 try 부분에서 실행할 코드를 표시하고, exception 이 발생 시 실행될 선언들을 catch 에 표시할 수 있다.

만약, try / catch 를 사용하지 않는다면 성공하는 로직과 실패 로직이 뒤섞여 알아보기 힘든 코드가 될 것이다.

React Suspense, ErrorBoundary

Suspense, ErrorBoundary 는 dynamic import 나 비동기 요청을 컨트롤 할 수 있다.

기존의 리액트 내에서의 비동기 요청은 컴포넌트 내의 특정 상태에 따라 실패, 로딩 중 렌더링할 요소들이 달라졌고 이 상태가 많아지면 더욱 요소가 많아지며 컨트롤하기 어려워졌다.

그러나 Suspense, ErrorBoundary 의 등장으로, 정상적인 요청 시 보여줘야 할 요소 렌더링에 집중할 수 있게 되었고, 에러나 로딩 상태에 대한 렌더링은 Suspense, ErrorBoundary 에게 위임할 수 있게 되었다.

---

참고

Imperative vs Declarative Programming

토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기

박스 여우 블로그