Built-in React DOM Hooks
react-dom ํจํค์ง๋ ์น ์ ํ๋ฆฌ์ผ์ด์
๋ง ์ง์ํ๋ (๋ธ๋ผ์ฐ์ ์ DOM ํ๊ฒฝ์์ ์คํ๋๋) Hook์ ํฌํจํ๊ณ ์์ต๋๋ค. ์ด Hook์ iOS, ์๋๋ก์ด๋, Windows ์ ํ๋ฆฌ์ผ์ด์
๊ณผ ๊ฐ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ ํ๊ฒฝ๋ค์ ์ง์ํ์ง ์์ต๋๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ฟ๋ง ์๋๋ผ ๋ค๋ฅธ ํ๊ฒฝ์์๋ ์ง์๋๋ Hook์ ์ฐพ๊ณ ์๋ค๋ฉด React Hook ํ์ด์ง๋ฅผ ์ฐธ๊ณ ํ์ธ์. ์ด ํ์ด์ง๋ react-dom ํจํค์ง์ ํฌํจ๋ ๋ชจ๋ Hook์ ๋์ดํ๊ณ ์์ต๋๋ค.
ํผ Hook
ํผ์ ์ ๋ณด ์ ์ถ์ ์ํ ์ํธ ์์ฉํ ์ ์ด๋ฅผ ๋ง๋ค ์ ์๋๋ก ํด์ค๋๋ค. ์ปดํฌ๋ํธ์ ์๋ ํผ์ ๊ด๋ฆฌํ๊ธฐ ์ํด ๋ค์๊ณผ ๊ฐ์ Hook ์ค ํ๋๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
useFormStatusํผ์ ์ํ์ ๋ฐ๋ผ UI๋ฅผ ์ ๋ฐ์ดํธํ ์ ์๊ฒ ํด์ค๋๋ค.
function Form({ action }) {
async function increment(n) {
return n + 1;
}
const [count, incrementFormAction] = useActionState(increment, 0);
return (
<form action={action}>
<button formAction={incrementFormAction}>Count: {count}</button>
<Button />
</form>
);
}
function Button() {
const { pending } = useFormStatus();
return (
<button disabled={pending} type="submit">
Submit
</button>
);
}