관리 메뉴

Mini

[React] useState 원리 본문

Front/React

[React] useState 원리

Mini_96 2023. 8. 24. 21:54

setNum은 Setter와 유사하다.

  let [num, setNum] = useState(1);

-일반변수 : 새로고침해야 렌더링됨

-useState : 값이변경되면 (setNum 호출되면 ) 화면이 자동으로 다시 렌더링됨.

 

import logo from './logo.svg';
import './App.css';
import { useState } from "react";

function App() {

  let name = "Bisuuuuuuuuuuu";

  let [num, setNum] = useState(1);


  return (
    <div className="App">
      <header className="App-header">
        <div>{num}</div>
        <button onClick={()=>{setNum(num=num+1)}}>버튼</button>
      </header>
    </div>
  );
}

export default App;