React-useState를 활용한기본구조

useState 활용

1

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

  function handleClick() {
    setNumber(number+1)
  }

  return (
    <div>
      <h2>{number}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  )

};

함수

2

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

  const handleClick = () => {
    setNumber(number+1)
  }

  return (
    <div>
      <h2>{number}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  )

};

export default App;

화살표 함수

3

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

  return (
    <div>
      <h2>{number}</h2>
      <button onClick={() => {
        setNumber(number + 1)
      }}>Click me</button>
    </div>
  )

};

export default App;

이벤트 안에 화살표 함수

4

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

  const handleClick = () => {
    setNumber((prev) => prev+1)
  }

  return (
    <div>
      <h2>{number}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  )

};

현재의 값state를 가지고 계산하고 싶을때 더 안전한 방법(화살표 함수로 하기,prev 넣기)