• 리액트는 UI를 조작하는 선언적 방법을 제공하는 라이브러리
  • 명령형: UI를 개별적으로 직접 조작

선언형

• 어떤 UI를 보여주고 싶은지 '선언'만 하면 알아서 그려줌
• 컴포넌트나 데이터의 배치를 통해 무엇이 렌더링 될지에 대해서만 생각
• 원하는 UI 결과값만 리턴하고 어떻게 화면에 보여지게 할 지 로직은 추상화
  • 즉, UI를 다루는 부분은 리액트에게 위임하고 개발자는 결과에만 초점

예시

• filter, map, reduce 등의 메서드
  • 이미 메서드 안에 동작이 서술되어 있기 때문에 개발자는 구체적인 절차는 신경 쓸 필요 없이 메서드를 그대로 선언에 사용하기만 하면 됨

const numbers = [1, 2, 3, 4, 5, 6];
let sum = numbers
  .filter(i => i % 2)
  .map(i => i * 2)
  .reduce((acc, cur) => acc + cur);

console.log(sum); // 18 

선언형 장점

• 코드가 간결해진다.
• DOM을 조작하는 세부 로직이 아닌 무엇을 보여줄 지에 집중할 수 있다.
  • 실제 렌더링 구현에 신경 쓸 필요가 없다.
• 화면이 어떻게 그려질 지 결과 예측이 쉬워진다.
• 디버깅이 쉽다.

선언형 특징 요약

• 결과물에만 집중하고, 복잡한 과정은 추상화해서 숨겨놓는다.
  • 명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 추측해야 한다.
  • 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 어떤 일이 발생할지 추측이 쉽다.
• 코드의 가독성을 높여 개발자가 문제의 본질(= 어떤 화면을 그릴지)에 집중할 수 있도록 도와준다.
• 코드 재사용성을 높여준다.

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

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

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

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

명령형

• UI를 조작하기 위한 과정을 컴퓨터에게 알려주는 것
• 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려지는지 지시
• 결과를 얻기 위해 데이터를 어떻게 조작해야 하는지 '과정'에 집중
• 코드가 어떻게 동작해야 하는지를 작성

예시

• 배열에 있는 숫자가 어떻게 반복되고 계산되는지에 대한 로직이 모두 드러남

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

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

console.log(sum); // 18

명령형 단점

• 과정을 하나하나 다 설명
  • 관리해야 하는 UI가 많아질수록 코드가 기하급수적으로 늘어남
• 코드의 가독성과 재사용성이 낮아져서 유지 보수가 힘들어짐
• 직관적이지 않아서 화면에 어떻게 그려질지 예측하기 어려움

참고 자료

리액트와 선언형 프로그래밍(Declarative Programming)
리액트(React) - Virtual DOM과 선언형