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>
);
}