[React] 리액트 숫자 증가감소 버튼 만들기

App.js

import React, { useState } from 'react';

let init = 0;

const App = () => {
  console.log('리빌드 됨');

  const [num, setNum] = useState(1);

  const increase = () => {
    setNum(num + 2);
  };

  const decrease = () => {
    setNum(num - 2);
  };

  const increase2 = () => {
    console.log('increase2');
    setNum(num + Number(init));
  };

  const decrease2 = () => {
    setNum(num - Number(init));
  };

  const numHandle = (e) => {
    console.log(e);
    console.log('numHandle : ' + e.target.value);
    init = e.target.value;
  };

  return (
    <div>
      <h1>숫자 : {num}</h1>
      <button onClick={() => setNum(num + 1)}>+</button>
      <button onClick={() => setNum(num - 1)}>-</button>
      <hr />
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
      <hr />
      <input type="text" onChange={numHandle} />
      <button onClick={increase2}>+</button>
      <button onClick={decrease2}>-</button>
    </div>
  );
};

export default App;

useState를 통해 컴포넌트에서 바뀌는 값을 관리

const [num, setNum] = useState(1);

 

람다식 함수인

const increase = () => {

    setNum(num + 2);

  };

 

그리고 Return

<button onClick={() => setNum(num + 1)}>+</button>

 

입력 받은 값을 String(문자열이) 아닌 Integer(정수) 값으로 더해줘야 하므로 람다식 함수는

const increase2 = () => {

    console.log('increase2');

    setNum(num + Number(init));

  };

 

그리고 Text에 입력을 할 수 있도록 numHandle과 e.targer.value

const numHandle = (e) => {

    console.log(e);

    console.log('numHandle : ' + e.target.value);

    init = e.target.value;

  };

 

※ 가장 중요한 useState가 바뀌는 값이 화면으로 받아올 수 없기 때문에

let init = 0; 을 최상단으로 옮겨주어야 한다.