[STUDY] 240409 | 리액트(React) | useState 카운트 예제

예제 🤓

• 현재 카운트 값에 버튼(1 / 10 / 100 / -100 / -10 / -1)을 사용하여, 버튼을 누를 때마다 해당 값을 카운트

---

input.js

//함수 만드는 방법 2가지
//function Inputs(num){}

import { useState } from "react";
const Inputs = () => {
    //1. input text에 글 입력 시 result-div에 입력되도록
    //let [name, setName] = useState('');
    //2. input date에 날짜 입력 시 result-div에 입력되도록
    //let [date, setDate] = useState();

    let[member, setMember] = useState({'name' : ''
                                        , 'myDate' : ''
                                        , 'car' : ''
                                        , 'contest' : ''
                                    });
    
    const changeMemberInfo = (e) => {
        setMember({...member, [e.target.name] : e.target.value})
    };

    return (
        <div>
            <div>input 컴포넌트</div>
            <div>
                {/* <input type="text" name="name" onChange={(e) => {
                    //1
                    //setName(e.target.value)
                    //2
                    // const copyMember = {...member};
                    // copyMember.name = e.target.value;
                    // setMember(copyMember);
                    //3
                    //setMember({...member, 'name': e.target.value});
                }}/> */}
                <input type="text" name="name" onChange={changeMemberInfo}/>
            </div>
            <div>
                {/* <input type="date" onChange={(e) => {
                    //setDate(e.target.value)
                    setMember({...member, 'myDate' : e.target.value})
                }}/> */}
                <input type="Date" name="myDate" onChange={changeMemberInfo}/>
            </div>
            <div>
                <select onChange={() => {}}>
                    <option>아반떼</option>
                    <option>k3</option>
                    <option>모닝</option>
                </select>
            </div>
            <div>
                <textarea cols={30} rows={5}></textarea>
            </div>
            <div>
                <button type="button">입력 내용 확인</button>
            </div>
            <div className="result-div">
                {/* <div>이름 : {name}</div> */}
                {/* <div>날짜 : {date}</div> */}
                <div>이름 : {member.name}</div>
                <div>날짜 : {member['myDate']}</div>
                <div>셀렉트 : {member.car}</div>
                <div>내용 : {member['content']}</div>
            </div>
        </div>
    );
}
export default Inputs;

---

App.js

• 스프레드 연산자
  • ...arr : arr 배열의 모든 요소를 낱개로 분리해 줌

import logo from './logo.svg';
import './App.css';
import Inputs from './conponents/inputs';
import { useState } from 'react';
import Counter1 from './conponents/counter1';
import Counter2 from './conponents/counter2';

function App() {
  //스프레드 연산자
  let arr = [1, 2, 3];
  // ...arr : arr 배열의 모든 요소를 낱개로 분리

  let arr1 = [];
  arr1.push(1); //[1]
  arr1.push(2); //[1, 2]
  arr1.push(arr) //[1, 2, [1, 2, 3,]]
  arr1.push(...arr) //[1, 2, [1, 2, 3,], 1, 2, 3]

  let arr2 = [...arr, 5, 6] //[1, 2, 3, 5, 6]
  
  let arr3 = [1, 2, 3];
  let arr4 = [1, 2, 3];
  //arr3와 arr4의 주소값은 다르다!

  let arr5 = [1, 2, 3];
  let arr6 = [...arr5]; //[1, 2, 3]
  //arr5와 arr6의 주소값은 다르다!

  let car1 = {
    'model' : '아반떼',
    'price' : 1000,
    'color' : 'white',
    'price' : 2000
  };
  //car1.price = 2000 (중복될 수 없으므로 마지막 값만 나옴)

  let car2 = {...car1};

  ///////////////////////////////////////////////////////

  let [count, setCount] = useState(0);
  const changeCount = (num) => {
    setCount(count + num);
  }

  return (
    <div className="App">
      {/* <Inputs /> */}
      <div className='simpleControler'>
        <h1>Simple counter</h1>
        <div>
          <Counter1 count={count}/>
        </div>
        <div>
          <Counter2 changeCount={changeCount}/>
        </div>
      </div>
    </div>
  );
}

export default App;

---

counter1.js

import { useState } from "react";

const Counter1 = ({count}) => {
    return(
        <div className="counter1">
            <div>현재 카운트 : </div>
            <h1>{count}</h1>
        </div>
    )
};
export default Counter1;

---

counter2.js

const Counter2 = ({changeCount}) => {
    return(
        <div className="counter2">
            <button type="button" onClick={(e) => {
                changeCount(1);
            }}>1</button>
            <button type="button" onClick={(e) => {
                changeCount(10);
            }}>10</button>
            <button type="button"  onClick={(e) => {
                changeCount(100);
            }}>100</button>
            <button type="button"  onClick={(e) => {
                changeCount(-100);
            }}>-100</button>
            <button type="button"  onClick={(e) => {
                changeCount(-10);
            }}>-10</button>
            <button type="button" onClick={(e) => {
                changeCount(-1);
            }}>-1</button>
        </div>
    )
};
export default Counter2;

---

App.css

.App {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

.result-div{
  width: 300px;
  background-color: #eeeeee;
  height: 100px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: left;
  padding: 8px;
}

.result-div > div{
  margin-bottom: 6px;
}

.counter1{
  width: 500px;
  background-color: #eeeeee;
  height: 100px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: left;
  padding: 20px;
  border-color: rgb(90, 90, 90);
  border-radius: 20px;
}

.counter2{
  width: 500px;
  background-color: #eeeeee;
  height: 30px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: left;
  padding: 20px;
  border-color: rgb(90, 90, 90);
  border-radius: 20px;
}

---

• 버튼을 클릭 할 때 해당 값대로 정상적으로 카운트 됨.