NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍

<!-- index.html -->
<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

위의 코드는 사용자 인터페이스를 업데이트 하는 방법에 대한 단계를 작성한 명령형 프로그래밍의 좋은 예이다.
그러나 사용자 인터페이스를 구축할 때 개발 프로세스의 속도를 높일 수 있기 때문에 선언적 접근 방식이 선호되는 경우가 많다.
DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용을 선언할 수 있게하면 더 좋을 것이다. 

(어떻게?) 야 컴퓨터. 나 뭐 해줘!

 

즉, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같다.
선언적 프로그래밍은 피자를 만드는 필요한 단계를 고려하지 않고 피자를 주문하는 것과 같다.

개발자가 사용자 인터페이스를 빌드하는데 도움이 되는 널리 사용되는 선언적 라이브러리는 리액트다.

React: 선언적 UI 라이브러리

개발자는 사용자 인터페이스에 어떤 일이 일어나길 원하는지 React에게 말할 수 있으며 React는 사용자를 대신하여 DOM을 업데이트하는 단계를 알아낼 것이다.

🍕 Quiz
다음 중 더 선언적인 것은 무엇입니까?
A: "반죽을 짜고, 반죽을 굴리고, 토마토 소스를 넣고, 치즈를 넣고, 햄을 넣고, 파인애플을 넣고, 200도 화덕에 굽고..."
B: "하와이안 피자 주세요."

 

다음 섹션에서는 React를 시작하는 방법을 살펴보자.