2024년 5월 16일 React-Counter

 

1. Counter.js

import React, {useState} from "react";

function Counter() {

    // let number = 0
    const [number, setNumber] = useState(0) // 값이 변할 때마다 갱신(가상DOM)
    // 가상 DOM을 업데이트 => 전체 화면이 갱신
    const onIncrease = () => {
        // number++
        // console.log(number)
        setNumber(number + 1)
        console.log('+1')
    }

    const onDecrease = () => {
        // number--
        // setNumber(number + 1)
        setNumber(number - 1)
        console.log('-1')  
    }
    
    return (
        <div>
            <h1>{number}</h1> 
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    )
}

export default Counter

 

2. Input.js

import React, {useState} from "react";

function Input(){

    const [string, setString] = useState('')

    const inputString = (e) => {
        setString(e.target.value)

    }

    const outputString = () => {
        setString('')
    }

    return (
        <div>
            <input onChange={inputString} value={string}/>
            <button onClick={outputString}>초기화</button>
            <div>
                <b>값 : {string}</b>
            </div>
        </div>
    )
}

export default Input

 

3. MultiInput.js

import React, {useState} from "react";

function MultiInput() {

    // const [idstring, setidString] = useState('')

    // const [namestring, setnameString] = useState('')

    const [inputs, setInputs] = useState({
        userid: '',
        name:''
    })

    const {userid, name} = inputs

    const onChange = (e) => {
        const {value, name} = e.target
        setInputs({
            ...inputs,
            [name]: value
        })
    }

    // const onidChange = (e) => {
    //     setidString(e.target.value)
    // }

    // const onnameChange = (e) => {
    //     setnameString(e.target.value)
    // }

    const onReset = () => {
        // setidString('')
        // setnameString('')
        setInputs({
            userid: '',
            name: ''
        })
    }

    return (
        // <div>
        //     <input placeholder="아이디" onChange={onidChange} value={idstring}/>
        //     <input placeholder="이름" onChange={onnameChange} value={namestring}/>
        //     <button onClick={onReset}>초기화</button>
        //     <div>
        //         <b>값 : {idstring}({namestring})</b>
        //     </div>
        // </div>
        <div>
            <input placeholder="아이디" name="userid" onChange={onChange} value={userid}/>
            <input placeholder="이름" name="name" onChange={onChange} value={name}/>
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : {userid}({name})</b>
            </div>
        </div>
    )
}

export default MultiInput

 

4. MultiCounter.jsx

import React, {useState} from "react";

export default  function MultiCounter({total, onClick}){

    const [count, setCount] = useState(0)
    return(
        <div className="box">
            <p className="number">
                {count} <span className="total">/{total}</span>
            </p>
            <button className="button" onClick={() => {
                setCount((prev) => prev + 1)
                onClick()
            }}>add</button>
        </div>
    )
}

 

4-1. AppCounter.jsx

import React, { useState } from "react";
import Counter from "./Counter";
import Input from "./Input";
import MultiInput from "./MultiInput";
import MultiCounter from "./Components/MultiCounter";
import './App.css'

export default function AppCounter() {
  const [count, setCount] = useState(0)
  const handleClick = () => setCount((prev) => prev + 1)

  return (
    <div className="container">
      <div className="banner">
         TotalCount: {count} { count > 10 ? '👍' : '👎'}
      </div>
      <div className="counters">
        <MultiCounter total={count} onClick={handleClick}/>
        <MultiCounter total={count} onClick={handleClick}/>
      </div>
    </div>
    
  );
}

 

5. App.css

.container{
  width: 600px;
  margin: auto;
}

.banner {
  text-align: center;
  margin-top: 5rem;
  font-size: 2rem;
  background-color: gold;
  font-weight: bold;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 2px solid orange;
}

.counter:hover {
  background-color: ivory;
}

.number {
  font-size: 3rem;
}

.button {
  font-size: 2rem;
  padding: 0.2rem, 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  background-color: orange;
}

.total {
  font-size: 1rem;
  margin-left: 0.5rem;
}