출처 : https://velog.io/@nemo/%EC%84%A0%EC%96%B8%ED%98%95-%EB%AA%85%EB%A0%B9%ED%98%95

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

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

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

정리

1. 선언형은 결과 위주 : 과정에 대해 구체적으로 표현 X [캡슐화, 추상화]
   ex. .reduce, .filter ===
2. 리액트에서 JSX 자체는 선언형이 아니지만 컴포넌트로 사용 시 추상적이기 때문에 선언형