Untitled

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
버튼 그룹 전 까지는 분명히 잘 따라갔습니다.
하지만,, 저는 ...props문법을 보자마자 머리가 하얗게 변했어요.

조금 더 혼자 공부하고, 해당 내용을 더하도록 하겠습니다.
밀린 선택강의 우선 듣고..!




[1] 명령형 & 선언형 프로그래밍

명령형 프로그래밍은 간단히 말해 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것입니다.

어떻게 구현하는가를 자세하게 기술하는 것에 관점이 가 있습니다.

선언형 프로그래밍은 간단히 말해 ‘무엇’이 나타나야 하는지를 묘사하는 것 입니다.

대표적인 선언형 프로그래밍 방식에는 HTML, SQL이 있습니다.


[1-1] 예시 1

해당 예시 코드를 보면 명령형과 선언형의 차이를 한눈에 볼 수 있습니다.

// 명령형 프로그래밍
function double1(arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    // 어떻게 처리해야하는지에 대해 묘사
    results.push(arr[i] * 2);
  }

  return results;
}

// 선언형 프로그래밍
function double2(arr) {
  return arr.map((num) => num * 2); // 무엇을 원하는지를 묘사
}

r1 = double1([1, 2, 3]);
r2 = double2([1, 2, 3]);
console.log(r1, r2);

확실히 선언형 프로그래밍이 더 간결하고 가독성이 좋습니다.

따라서 우리는 선언형 프로그래밍을 지향해야 합니다.



또한 명령형은 유지보수에 굉장히 좋지 않습니다.

// 명령형 프로그래밍
function double1(arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    if (typeof arr[i] === "number") {
      results.push(arr[i] * 2);
    }
  }

  return results;
}

// 선언형 프로그래밍
function double2(arr) {
  return arr.filter((param) => typeof param === "number").map((num) => num * 2);
}

r1 = double1([1, 2, 3, 5, "a", null]);
r2 = double2([1, 2, 3, 5, "a", null]);
console.log(r1, r2);

명령형의 경우 새로운 조건이 늘어날수록, 무한정 코드의 줄이 늘어날 수 있습니다.

반면에 선언형 프로그래밍은 조금 더 명확하게 어떤 결과물이 도출되어야 하는지 알 수 있습니다.


[1-2] 예시 2

** 코드의 일부만 첨부합니다.

버튼 하나 추가하면 또 그에 비례해서 늘어나는 코드의 양..! 이런 식으로 프로그래밍을 하다가는 코드가 몇만줄이 되어도 모자랄 것 같네요.

이것이 바로 명령형 프로그래밍입니다..!

//-------------------- 명령형 프로그래밍
const $button1 = document.createElement("button");
$button1.textContent = "Button1";

const $button2 = document.createElement("button");
$button2.textContent = "Button2";

const $button3 = document.createElement("button");
$button3.textContent = "Button3";

const $app = document.querySelector("#app");

$app.appendChild($button1);
$app.appendChild($button2);
$app.appendChild($button3);

$button1.addEventListener("click", () => {
  if ($button1.style.textDecoration === "line-through") {
    $button1.style.textDecoration = "none";
  } else {
    $button1.style.textDecoration = "line-through";
  }
});

// ... addEventListener ...

반면에 선언형 프로그래밍은 참 간결합니다.

어떤 기능이나 파라미터가 늘어나도, 유연하게 코드를 변경하고 추가할 수 있습니다.

// -------------------- 선언형 프로그래밍
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,
    });

    if (onClick) {
      onClick(this.state.clickCount);
    }
  });

  this.render();
}

const $app = document.querySelector("#app");

new ToggleButton({
  $target: $app,
  text: "Button1",
});

// ...

ButtonGroup추가는 조금 더 고민해봐야겠아요.

일단 ...문법부터 헷갈리네요 ㅠㅠ

출처

프로그래머스

댓글남기기

다른 게시글