useState

React 컴포넌트에서는 컴포넌트 내부에서 선언한 변수의 값이 바뀌더라도, 화면에 그려진 값이 바뀌지 않는다.

 

이럴 때 useState를 사용해서 값이 바뀌었을 때 바로바로 반영해준다.

 

 

import {useState} from 'react';

function App() {
  const [number, setNumber] = useState(1);

  const double = () => {
    const doubleNumber = number * 2;
    setNumber(doubleNumber);
    console.log(doubleNumber);
  };
  
  return (
    <>
      <div>{number}</div>
      <button onClick={double}>Submit</button>
    </>
  )
}

export default App;