[JS]counter만들기

borderline0px·2021년 7월 8일
0

JavaScript

목록 보기
3/3

minus btn의 경우에는 0이 되면 더이상 count가 내려가지 않도록 만들었음

  • JS
  • JS Class
  • React Class
  • React Hook

1. JS로 구현

<body>
    <span class="counter">0</span>
    <button class="plus">+</button>
    <button class="minus">-</button>
    <script>
      const counter = document.querySelector(".counter");
      const plusBtn = document.querySelector(".plus");
      const minusBtn = document.querySelector(".minus");
      let count = 0;

      function increase() {
        count++;
        counter.innerText = count;
      }

      function decrease() {
        count <= 0 ? 0 : count--;
        counter.innerText = count;
      }

      plusBtn.addEventListener("click", increase);
      minusBtn.addEventListener("click", decrease);
    </script>
  </body>

2. JS Class로 구현

<body>
    <span class="counter">0</span>
    <button class="plus">+</button>
    <button class="minus">-</button>
    <script>
      class Counter {
        constructor({
          initialNum = 0,
          counterClassName,
          plusClassName,
          minusClassName,
        }) {
          this.count = initialNum;
          this.counter = document.querySelector(counterClassName);
          this.counter.innerText = initialNum;
          this.plusBtn = document.querySelector(plusClassName);
          this.minusBtn = document.querySelector(minusClassName);
          this.setEventListener();
        }

        setEventListener = () => {
          this.plusBtn.addEventListener("click", this.increase);
          this.minusBtn.addEventListener("click", this.decrease);
        };

        increase = () => {
          this.count++;
          this.repaint();
        };

        decrease = () => {
          this.count <= 0 ? 0 : this.count--;
          this.repaint();
        };

        repaint = () => {
          this.counter.innerText = this.count;
        };
      }

      const counter = new Counter({
        counterClassName: ".counter",
        plusClassName: ".plus",
        minusClassName: ".minus",
      });
    </script>
  </body>

3. React class로 구현

import React from "react";

class Counter extends React.Component {
  state = {
    count: 0,
  };

  increase = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };

  decrease = () => {
    this.setState((current) => ({
      count: current.count <= 0 ? 0 : current.count - 1,
    }));
  };

  render() {
    const { count } = this.state;
    return (
      <div>
        <span>{count}</span>
        <button onClick={this.increase}>Add</button>
        <button onClick={this.decrease}>Minus</button>
      </div>
    );
  }
}
export default Counter;

4. React hook으로 구현

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  const increase = () => setCount(count + 1);

  const decrease = () => setCount(count <= 0 ? 0 : count - 1);

  return (
    <div>
      <span>{count}</span>
      <button onClick={increase}>Add</button>
      <button onClick={decrease}>Minus</button>
    </div>
  );
}

export default Counter;
profile
어려운 게 아니라 낯설어서 그런거야

0개의 댓글