처음 React를 배우기 시작했을 때 선생님께서 "JavaScript는 명령형 프로그래밍이고 React는 선언형 프로그래밍이다"라고 말씀하셨습니다. 하지만 처음에는 이것이 이해가 되지 않았습니다. 그래서 차이점을 더 잘 이해하기 위해 분류해 보기로 했습니다.

명령형 프로그래밍과 선언형 프로그래밍을 피자와 비교하시나요?

더 쉽게 시각화하기 위해 요리에 대한 이 두 가지 접근 방식을 비교해 보겠습니다.

명령형 프로그래밍 비유:

셰프에게 피자 만드는 방법을 단계별로 알려주는 것과 비슷하죠?

선언적 프로그래밍 비유:

피자를 만드는 데 필요한 단계를 고려하지 않고 피자를 주문하는 것과 같습니다.

명령형 프로그래밍이란 무엇입니까?

명령형 프로그래밍은 개발자가 특정 작업을 수행하는 방법을 명시적으로 정의하는 스타일입니다. 사용자 인터페이스를 업데이트하는 방법에 대한 단계를 작성하고 있습니다.

예: HTML의 h1 태그에 텍스트 추가

const h1Element = document.createElement('h1');
h1Element.textContent = 'Hello, World!';
document.body.appendChild(h1Element);

이 코드에서는

1. h1 요소 수동 생성
2. 텍스트 내용 설정
3. 페이지에 추가 모든 개별 단계가 기록됩니다. 이는 개발자가 컴퓨터가 수행해야 하는 작업과 수행 방법을 명확하게 정의해야 하는 명령형 프로그래밍의 특징입니다.

선언적 프로그래밍이란 무엇입니까?

반대로, 선언적 프로그래밍은 수행 방법을 지정하지 않고 달성하려는 목표에 중점을 둡니다. 시스템이 귀하를 대신하여 세부 사항을 처리합니다.

예: h1 태그에 텍스트 추가(React 사용)

function App() {
  return (
    
Hello, World!
  );
}

이 예에서는 단순히 "Hello, World!"라는 텍스트가 포함된 h1 요소를 선언합니다. 나타나야 합니다. DOM에 추가되는 방법에 대한 세부 사항은 React에서 처리됩니다. 페이지에서 수행할 작업만 지정하면 명령형 접근 방식보다 선언적 프로그래밍이 훨씬 더 간단하고 효율적입니다.

결론

• 명령형 프로그래밍에는 작업 수행 방법을 단계별로 지정하는 작업이 포함됩니다.
• 선언적 프로그래밍은 달성하려는 작업에 중점을 둡니다.

React와 같은 선언적 라이브러리를 사용하면 개발자가 복잡한 UI 로직을 더 간단하고 관리하기 쉬운 용어로 표현할 수 있어 개발 프로세스가 더 빠르고 직관적이게 됩니다.

참조: Next.js 튜토리얼

피자 비유는 Next.js 튜토리얼에서 참조되었습니다.