프론트엔드 데브코스 TIL #DAY13

에구마·2023년 10월 5일

국비지원교육 코딩부트캠프 프로그래머스 데브코스 프론트엔드 데브코스

프론트엔드 데브코스 기록

목록 보기

10/47

23.10.05

📚 오늘 공부한 것

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

선언형 프로그래밍으로 토글 버튼 구현하기

😲 새롭게 알게된 것

자바스크립트 변수명에서 $(달러표시)의 의미

자바스크립트에서도 변수명에 $를 쓸 수 있다.
_(언더스코어) 처럼 사용이 가능한 것인데, 특별히 $를 붙인 변수는 유일한 요소! 라는 특징이 있다. 공통점을 더 찾아보자면 주로 돔요소를 가져올 때 주로 쓴다.

function ButtonGroup({ $target, buttons }) {
...
const $body = document.querySelector("body");
...
new ButtonGroup({
  $target: $body,

바닐라JS에서 상태관리

함수(객체)내에서 this를 이용하여 state변수와 setState함수를 만들어 두고, 이벤트리스너 발생시에 이에 접근해서 상태를 바꿀 수 있다!

여기서 주의할 것이! 상태 변경함수는 setState에서 render를 한번 발생시킨다!

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 $body = document.querySelector("body");

const btn1 = new ToggleButton({
  $target: $body,
  text: "Button1",
  onClick: (count) => {
    // 이렇게 추가
    if (count === 3) {
      alert("세번!");
    }
  },
});

그래서 왜 선언형 프로그래밍이 UI에 좋을까?

에 대한 나의 생각 정리 : 리액트의 장점이자 특징도 코드의 작동과정 보단 컴포넌트로 나누고 어떤 걸 배치할지에 집중한다는 것이다. 그래서 가독성이 좋다. 결국 화면에 그려지는 즉 ui 부분에 대해 직관적으로 이해할 수 있다. 바닐라 자바스크립트에서도 선언형 프로그래밍으로 작성하면 가독성과 재사용성을 높일 수 있다.

🤨 느낀 점

선언형 프로그래밍을 직접 코딩해보면서 배워서 와닿을수 있었다. 추상화까지 배우면서 처음 개발 시작했을 때 짰던 코드가 많이 생각났다.. 이벤트나 클래스 등록을 요소 각각마다 했었고 그러다보니 코드가 몇백줄까지 길어졌었다. 후에 리팩토링을 하기 위해 함수화를 하고 반복을 줄였던게 명령형에서 선언형으로 이전하는 과정이었나보다!

🤔 오늘 회고

Keep

실습 코드를 모두 직접 코딩해보았고, 주어진 예제 문제를 강의 전에 먼저 구현해보았다. 내가 생각한 방법과 강사님의 풀이의 차이를 볼 수 있어서 거기서 배우는 것들을 더 잘 기억할 수 있었다.

Problem

this.render 여러 번 호출을 대비한 isInit을 초기화 하는 과정에서 혼란스러웠다. 바닐라 자바스크립트 뿐만 아니라 객체와 this, render에 대한 지식을 확립하지 못해서라고 느꼈다. 팀원들에게 질문하고 같이 얘기해보면서 헷갈렸던 부분을 바로잡을 수 있었다.