React 에서의 선언적 프로그래밍

선언형 프로그램

어떻게 해야하는지 보다 무엇을 나타내야 하는지 설명하는 프로그램

 

React 공식페이지에서는 React는 선언형이라고 한다. 무슨 의미일까 ?

 

명령형 프로그램 예시

// Hello, World! 화면에 출력하기
// 순수 javaScript 명령형 코드
const root = document.getElementById('root'); 
const header = document.createElement('h1'); 
const headerContent = document.createTextNode(
	'Hello, World!'
);

header.appendChild(headerContent); 
root.appendChild(header); 

// React 코드 (선언적인)
const header = <h1>Hello, World!</h2>; // jsx
ReactDOM.render(header, document.getElementById('root'));

명령형으로 작성된 코드의 경우, Hello, World 라는 h1 태그를 그려주기 위해, 컴퓨터가 수행하는 절차를 일일히 코드로 작성해주어야 한다.

 

반면, React 코드의 경우 이러한 절차를 작성해 줄 필요 없이, 필요한 UI컴포넌트를 만들고, render 함수로 호출만 한다면

React가 알아서 절차를 수행해 화면에 출력한다.

 

즉 명령형으로 작성해야만 했었던, 어떻게 그려야 할 지는 React가 알아서 해주는 것.

우리는 그저 무엇을 그리고 싶은지만 추가하면 되는 것이다.

 

 

출처

https://velog.io/@kairase024/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80-%EC%84%A0%EC%96%B8%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8DDeclarative-Programming