명령형 vs 선언형, 리액트가 선언형 프로그래밍인 이유

 

명령형 프로그래밍

무엇을 어떻게 할 것이다. ( HOW )

아래 예제를 보면 배열에 있는 숫자가 어떤 식으로 반복되고 계산될지 로직을 직접 구현하고 있다.

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

 

 

선언형 프로그래밍

무엇을 할 것이다. ( WHAT )

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 />의 렌더링되는 과정까지 알 필요가 없다.

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

 

 

 

 

출처

https://velog.io/@nemo/선언형-명령형

https://so-tired.tistory.com/75