useState๋ state๋ฅผ ํจ์ ์ปดํฌ๋ํธ ์์์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋๋ค.
์ฆ, useState๋ฅผ ์ด์ฉํ๋ฉด ์ปดํฌ๋ํธ์ ์ํ๊ฐ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.
const [state, setState] = useState(initialState);
// [์ํ๊ฐ, ์ํ๊ฐ๋ณ๊ฒฝํจ์] = useState(์ํ๊ฐ์์ด๊ธฐ๊ฐ)
ํจ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ์ค state๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์ ๋ ํด๋์ค ์ปดํฌ๋ํธ๋ก ๋ฐ๊พธ๊ณค ํ์ ๊ฒ๋๋ค. ํ์ง๋ง ์ด์ ํจ์ ์ปดํฌ๋ํธ ์์์
useState
Hook์ ์ด์ฉํ์ฌ state๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
const [item, setItem] = useState(1);
const item = useState(1)[0];
incrementItem = () => setItem(item-1);
import React, { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
{count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}