[React] useState를 통해 컴포넌트에서 바뀌는 값 관리 (클릭 이벤트)

1. +1일때 1씩 증가하고 -1일때 1씩 감소하는 UI 만듬

1) Counter.js

import React from 'react';

function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}

export default Counter;

2) App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <Counter />
  );
}

export default App;

3) 결과

 

2. 이벤트 설정

1) Counter.js

import React, { useState } from 'react'; //useStare를 사용해서 바뀌는 값을 관리

function Counter() {
  const [number, setNumber] = useState(0); //number 상태 기본값은 0, setNumber:상태 바꿔줌

  const onIncrease = () => {
    // console.log('+1');
    // setNumber(number+1)
    setNumber(prevNumber => prevNumber + 1 );
  }

  const onDecrease = () => {
    // console.log('-1');
    // setNumber(number-1)
    setNumber(prevNumber => prevNumber + 1 );
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

- const [number, setNumber] = useState(0); 아래의 뜻임

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];