React / VanillaJS totalCount 만들기

KHW·2021년 10월 18일

React 자바스크립트

프레임워크

목록 보기

24/43

목표

카운트를 하는 부분 3개와 이를 토탈 계산하는 결과 1부분을 만들 것이다.

VanillaJS로 만들기

필요한 파일

index.html

App.js

index.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script src="App.js" type="module"></script>
</body>
</html>

App.js

import Counter from './Components/Counter/index.js'

const $app = document.querySelector('#app')
const $target = $app;

let totalCount = 0;

$app.innerHTML =
  `<div>
        <span>TotalCount</span>
        <span id="totalCount" >0</span>
    </div><br>`

new App({
  $target : $app
})

function App({ $target }){
  new Counter({
    $target,
    onIncrease : ($target  )=>{
      totalCount++
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    },
    onDecrease : ($target )=>{
      totalCount--
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    }
  }),
  new Counter({
    $target,
    onIncrease : ($target )=>{
      totalCount++
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    },
    onDecrease : ($target )=>{
      totalCount--
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    }
  }),
    new Counter({
      $target,
      onIncrease : ($target )=>{
        totalCount++
        $target.querySelector('#totalCount').innerHTML = String(totalCount)
      },
      onDecrease : ($target )=>{
        totalCount--
        $target.querySelector('#totalCount').innerHTML = String(totalCount)
      }
    })
}

Components/Counter/index.js

export default function Counter({ $target , onIncrease , onDecrease }){
  const $div = document.createElement('div');
  $target.appendChild($div)
  let count = 0

  this.render = ()=>{
    const random = Math.floor(Math.random() * 1000000)
    const increaseId = `increase${random}`
    const decreaseId = `decrease${random}`

    $div.innerHTML = `
      <span id="count" style="font-size:40px">0</span><br/>
      <button id=${increaseId}>+</button>
      <button id=${decreaseId}>-</button>
     `

    document.querySelector(`#${increaseId}`).addEventListener('click',()=>{
      count++;
      $div.querySelector('#count').innerHTML = String(count)
      onIncrease($target , count);
    })

    document.querySelector(`#${decreaseId}`).addEventListener('click',()=>{
      count--;
      $div.querySelector('#count').innerHTML = String(count)
      onDecrease($target ,count);
    })
  }

  this.render();
}

주의할 점으로는 Counter/index.js 내부코드에서는 onIncrease나 onDecrease가 어떻게 구현됐는지는 관심이 없고 단지 내부코드에서 onIncrease나 onDecrease가 실행될 때 매개변수로 존재하는 부분처럼만 실행 해

React로 만들기

필요한파일

App.js

index.js

App.js

import Counter from './components/Counter'
import {useState} from "react"

function App(){
  const [totalCount , setTotalCount] = useState(0)

  return (
    <div>
      TotalCount : {totalCount}
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>

    </div>
  )
}

export default App;

Components/Counter/index.js

import {useState} from "react";

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

  const handleIncrease = () => {
    setCount(count+1)
    onIncrease(count + 1)
  }

  const handleDecrease = () => {
    setCount(count-1)
    onDecrease(count - 1)
  }

  return (
    <div>
      <span style={{fontSize:40}}>{count}</span><br/>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
    </div>
  )
}

export default Counter;