useState

useState란 컴포넌트 안에서 상태 값을 선언하고, 그 값을 변경할 수 있게 해주는 함수이다.

import { useState } from "react";

function App() {
    const [state, setState] = useState(0); // 0으로 설정
    return (
        <>
            <div>
                <h1>{state}</h1>
                <button onClick={() => {
                    setState(state + 1);
                }}>+</button>
            </div>
        </>
    );
}

export default App

 

상태를 직접 바꾸면 안 되고 반드시 setLight() 같은 상태 업데이트 함수를 사용해야 한다.

상태가 바뀌면 자동으로 컴포넌트가 랜더링된다.

import { useState } from "react";

function App() {
    const [light, setLight] = useState("OFF");
    return (
        <>
            <div>
                <h1>{light}</h1>
                <button onClick={() => {
                    setLight(light === "ON" ? "OFF" : "ON")
                }}>
                    {light === "ON" ? "끄기" : "켜기"}
                </button>
            </div>
        </>
    );
}

export default App

 

---

 

한 입 크기로 잘라먹는 리액트

https://inf.run/FiFhg