선언적 프로그래밍 및 반응

표지 사진 작성자: Mimi Thian on Unsplash

선언적 프로그래밍은 JavaScript 커뮤니티에서 React에 의해 대중화된 것입니다. 새로운 것은 아니지만 최근에 대중화되었습니다.

위키피디아에 따르면:

declarative programming is a programming paradigm — a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

이 정의는 당신이 선언적 프로그래밍을 알고 있는 경우에만 좋은 것이지만 우리가 그것을 이해하게 될 것이라고 걱정하지 마십시오.

선언적 프로그래밍

선언적 프로그래밍은 그림을 설명하는 것과 같으며 명령형 프로그래밍은 그림을 그리는 명령입니다. 선언적 프로그래밍은 코드를 만듭니다.

더 읽기 쉬운: 낮은 수준의 세부 정보를 숨기기 때문에 읽기 쉬운 프로그램입니다. 선언적 프로그래밍에서 우리는 시스템의 하위 수준 세부 사항에 대해서도 알지 못합니다.

추론하기 쉬움: 우리가 작성하는 코드는 훨씬 추상화되어 있고 절차 대신 솔루션을 설명하기 때문에 추론하기가 더 쉽습니다.

내가 말했듯이 선언적 프로그래밍은 새로운 것이 아니므로 업계에서 널리 사용되는 선언적 언어가 많이 있습니다. 그 중 몇 가지를 말씀드리자면

SQL

SQL은 프로그래밍에 사용되는 도메인별 언어이며 관계형 데이터베이스에 저장된 데이터를 관리하도록 설계되었습니다. 이 글을 읽고 계신다면 설명할 필요가 없을 것 같습니다introduction of SQL. 이것은 관계형 데이터베이스 관리를 위한 사실상의 표준일 뿐입니다.

이 간단한 SQL 쿼리를 살펴보십시오.

SELECT * FROM Employees

여기서 우리는 직원을 얻는 방법이 아니라 모든 직원 세부 정보가 필요하다고 정의합니다. 우리는 데이터베이스가 데이터를 저장하는 데 사용하는 복잡한 데이터 구조에 대해 신경쓰지 않습니다.

CSS

CSS는 선언적 프로그래밍의 좋은 예입니다. CSS에서는 실제로 요소의 모양을 정의하고 브라우저가 이를 구현합니다. 이 div는 색상이 파란색이어야 하고 텍스트는 밝은 노란색이어야 하며 브라우저에서 자동으로 처리한다고 말할 수 있습니다.
body를 다음으로 설정한다고 상상해 보십시오.

body {
  width: 500px;
  height: 500px;
  background: palevioletred;
  color: white;
}

이제 브라우저는 CSS에 따라 본문을 만듭니다. 이것은 선언적 프로그래밍의 개념이며 구조를 정의하면 컴파일러/호스트가 대신 수행합니다.

React의 선언적 프로그래밍

반응에서 구성 요소의 상태를 변경하여 대화형 UI를 만들고 React는 이에 따라 DOM을 업데이트합니다.

이 반응 코드를 예로 들어 보겠습니다.

import React from "react";

class App extends React.Component {
  state = {
    message: "Hello react"
  }
  render() {
    return (
    <div className="App">
      <h1>{this.state.message}</h1>
      <button 
        onClick={e => this.setState({message: "Hello World"})}>
          Change Message</button>
    </div>
  );
  }
}

이렇게 하면 다음과 같은 버튼which can you see here과 함께 "hello React"메시지가 생성됩니다.



버튼을 클릭하면 메시지가 "Hello World"로 변경됩니다.

반응에서 DOM은 선언적입니다. 즉, DOM과 상호 작용하지 않으며 상태를 변경할 때 UI가 업데이트됩니다. 이렇게 하면 UI를 디자인하고 디버그하기가 더 쉬워집니다. 프로그램의 상태를 변경하고 특정 시간에 UI가 어떻게 표시되는지 확인할 수 있습니다.

TL; DR

선언적 프로그래밍에서는 프로그램/UI/그림을 설명하고 다른 사람이 React/브라우저/OS에서 이를 구현합니다.