[React] useState - 컴포넌트 바뀌는 값 관리하기

useState를 통해 인터렉션 구현하기

 

먼저, Counter.js 파일을 만들어줍니다. (버튼을 누르면 숫자가 바뀌는 Counter 컴포넌트)

// Counter.js
import React, { useState } from 'react';
// 리액트 패키지에서 useState 라는 함수를 불러와줍니다.

function Counter () {
  // const [현재상태, Setter함수] = useState(기본값);
  const [number, setNumber] = useState(0);

  const Increase = () => {
    console.log('+1');
    // setNumber(number + 1);
    // 이렇게 함수형으로 파라미터를 넘겨주면 상태값 변경을 배치로 처리한다.
    setNumber(prevNumber => prevNumber + 1);
  }
  const Decrease = () => {
    console.log('-1');
    setNumber(prevNumber => prevNumber - 1);
  }
  return (
    <>
      <h1>{number}</h1>
      <button onClick={Increase}>+1</button>
      <button onClick={Decrease}>-1</button>
    </>
  )
}

export default Counter;

 

 

그다음, App.js에서 Counter컴포넌트를 렌더링 합니다.

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

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

export default App;