선언형 VS 명령형, 리액트가 선언형인 이유

nemo·2022년 3월 18일
9

React

목록 보기
12/28
post-custom-banner

리액트의 특징 중 하나가 선언형 프로그래밍이라는 점이다. 그런데 선언형 프로그래밍이 도대체 뭘까? 아무리 찾아봐도 설명이 어렵게 되어 있어 나름 정리해 보았다.

우리는 리액트로 작업할 때 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려질 수 있는지에 대해 생각하기보다는, 컴포넌트나 데이터 등의 배치를 통해 무엇이 렌더링 될지에 대해 생각한다. 이게 선언형 UI의 핵심이다.


코드 형식 비교

선언형으로 작성된 코드는 영어를 할 수 있다면 의도를 쉽게 파악할 수 있다. 아래 두 코드의 차이를 살펴보자.

명령형 코드

명령형 코드는 결과물을 얻기 위한 '과정'에 집중한다.
아래 예제를 보면 배열에 있는 숫자가 어떤 식으로 반복되고 계산될지 로직을 직접 구현하고 있다.

const numbers = [1, 2, 3, 4, 5, 6];
let sum;

sum = 0;
for (let i = 0; i < numbers.length; i++) {
  if (i % 2 === 0) {
    sum += numbers[i] * 2;
  }
}

console.log(sum); // 18

선언형 코드

filter, map, reduce 메서드가 어떤 로직으로 구현되는지 우리는 알 필요가 없다. 이미 메서드 안에 서술되어 있기 때문에 우리는 구체적인 절차는 신경쓰지 않고, 추상화된 메서드를 사용하고 싶을 때 선언만 하면 되는 것이다.

const numbers = [1, 2, 3, 4, 5, 6];
let sum;

sum = numbers
  .filter(i => i % 2)
  .map(i => i * 2)
  .reduce((acc, next) => acc + next);

console.log(sum); // 18 

선언형 프로그래밍 특징 정리

  • 결과물에만 집중하고, 복잡한 과정은 추상화하여 신경쓰지 않는다.
  • 명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 추측해야 한다. 반면에 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 어떤 일이 발생할지 예측이 단숨에 가능하다.
  • 따라서 선언형이 더 가독성이 좋으며 예측이 쉽다.
  • 선언형 코드는 사용자에게 편리함을 제공하는 대신 컴퓨터가 이해하지 못하기 때문에 변경해주는 작업이 필요하다. 하지만 이 또한 우리가 신경 쓸 영역이 아니다.

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

JSX 자체가 선언형은 아니다. 하지만 JSX의 캡슐화를 통해 선언형 코드 작성이 가능해진다. 아래 코드를 보면 이해가 쉬워진다.

const App = () => {
  <Nav />
  <Menu />
  <Detail />
}

<Nav />, <Menu />, <Detail />는 JSX로 작성된 코드를 캡슐화한 컴포넌트다. 각 컴포넌트의 자세한 코드는 직접 들어가봐야 알겠지만, 어떤 순서와 어떤 내용으로 화면에 그려질지는 대충 예측할 수 있다.
또한 우리는 <Nav />, <Menu />, <Detail />렌더링되는 과정까지 알 필요가 없다.

이러한 특징 덕분에 리액트 개발자는 컴포넌트 관련 작업만 신경쓰면 된다.



참고
📎 Imperative and Declarative Programming

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

post-custom-banner

0개의 댓글