[2023-10-05] TIL - 명령형 프로그래밍과 선언형 프로그래밍

📝오늘 배운 것

1. 명령형 프로그래밍과 선언형 프로그래밍

 

💡알게된 것

1. 명령형 프로그래밍과 선언형 프로그래밍의 정의

선언형 프로그래밍

  - 무엇을 해결해야 할지에 집중하고 해결방법은 컴퓨터에게 위임하는 방법

명령형 프로그래밍

  - 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내리는 방법

2. 명령형 프로그래밍 보다는 선언형 프로그래밍을 지향해야한다.

  - 보기쉽고 코드가 간결하니까

3. 명령형은 순서대로 코드작성, 선언형은 고차함수 사용

 

👁‍🗨선언형 프로그래밍 예시

// ------------------------선언형 프로그래밍 방식. 4---------------------------
//버튼의 그룹을 만들어서 외부에서 개입할 수 있는 요소를 최소한으로 하는 독립적인 UI
// 궁극적으로 이런 추상화하는 개념을 잘 알아야한다.
function ButtonGroup({ $app, buttons }) {
  const $group = document.createElement("div");
  let isInit = false;
  this.render = () => {
    if (!isInit) {
      //forEach(type, ...proprs) -> X
      //forEach({type, ...props}) -> O
      buttons.forEach(({ type, ...props }) => {
        if (type === "toggle") {
          new ToggleButton({ $target: $group, ...props });
        } else if (type === "timer") {
          new TimerButton({ $target: $group, ...props });
        }
      });
      $app.appendChild($group);
      isInit = true;
    }
  };
  //꼭 render을 실행해줘야됨
  this.render();
}
function TimerButton({ $target, text, timer = 3000 }) {
  const button = new ToggleButton({
    $target,
    text,
    onClick: () => {
      setTimeout(() => {
        button.setState({
          ...button.state,
          toggled: !button.state.toggled,
        });
      }, timer);
    },
  });
}

function ToggleButton({ $target, text, onClick }) {
  const $button = document.createElement("button");
  $target.appendChild($button);

  this.state = {
    clickCount: 0,
    toggled: false,
  };
  this.setState = (nextState) => {
    this.state = nextState;
    this.render();
  };
  this.render = () => {
    $button.textContent = text;
    $button.style.textDecoration = this.state.toggled ? "line-through" : "none";
  };
  $button.addEventListener("click", () => {
    this.setState({
      clickCount: this.state.clickCount + 1,
      toggled: !this.state.toggled,
    });
    //생성자에 onClick이 있다면 실행함
    if (onClick) {
      onClick(this.state.clickCount);
    }
  });
  this.render();
}

const app = document.querySelector("body");

new ButtonGroup({
  $app: app,
  buttons: [
    {
      type: "toggle",
      text: "toggel버튼1",
    },
    {
      type: "toggle",
      text: "toggel버튼2",
    },
    {
      type: "timer",
      text: "timer",
    },
  ],
});

 

☝중요한 점

1. 고차함수(map,filter,forEach)를 사용해서 선언형 프로그래밍 방식을 지향해야한다.

 - 코드가 간결해지고, 보기 쉽다.

2.  선언형 프로그래밍으로 코드 작성을 지향해야한다!

 - 재사용성이 좋아진다.

 - 코드를 공유하기 쉽다.

 - 외부의 요인을 통해 들어가는 것이 아닌 격리된 상태에서 정해진 값들에 의해서만 돌아가므로 독립적이다.

 - 상태를 기반으로 추상화 되어있는 UI를 잘 만드는 것이 중요하다.