React useState

useState는 React에서 상태(데이터)를 관리 할 때 사용된다.

 

먼저 useState를 사용하기 위해서 import

import React, { useState } from 'react';

 

다음은 관리할 대상을 기준으로 배열을 선언해준다.

// [상태, 이 상태를 핸들링할 명칭] = useState(초기값)
const [ counter, setCounter ] = useState(0);

 

그후 아래와 같이 값을 onClick 이벤트를 만들어준다.

import React, { useState } from 'react';
 
function App() {
  // [상태, 이 상태를 핸들링할 명칭] = useState(초기값)
  const [ counter, setCounter ] = useState(0);
 
  // click event
  const countUp = () => {
    // counter의 상태를 변경한다.
    setCounter(counter + 1);
  }
 
  return (
    <div className="App" stlye={{
      fontSize: 50,
      paddingTop: 30
    }}>
      // counter를 출력
      count : { counter }
    </div>
  );
}
 
export default App;