SNAX

TanStack Form ์ถœ์‹œ

TanStack Query(React Query)์˜ ๊ฐœ๋ฐœ์ž TanStack์ด ๋‚ด๋†“์€ ์ƒˆ๋กœ์šด ์–‘์‹(Form) ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
์ถœ์‹œ์ผ: 2024๋…„ 4์›” 27์ผ
โ€ข
Framework Agnostic: React, Vue, Angular ๋“ฑ ์—ฌ๋Ÿฌ ํ”„๋ ˆ์ž„์›Œํฌ ์ง€์›
โ€ข
Isolate Re-renders: React Hook Form๊ณผ ๋™์ผํ•˜๊ฒŒ Uncontrolled ๋ฐฉ์‹์œผ๋กœ ๋ฆฌ๋ Œ๋”๋ง์„ ์ตœ์†Œํ™”ํ•œ๋‹ค.
โ€ข
Validation: zod, yup, valibot ๋“ฑ์˜ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก adaptor ์ œ๊ณต.
โ€ข
SSR: Next.js Server Action์„ ์ง€์›ํ•˜์—ฌ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.
โ€ข
Granular reactivity: ์„ธ๋ถ„ํ™”๋œ ๋ฐ˜์‘์„ฑ์„ ์ง€์›ํ•˜์—ฌ ์›ํ•˜๋Š” ์˜์—ญ๋งŒ ์ƒํƒœ๋ฅผ ๊ตฌ๋…, ๋ฆฌ๋ Œ๋”๋ง์„ ๋ณด๋‹ค ์ตœ์†Œํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค.
โ€ข
Linked Fields: ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ์Šคํ‚ค๋งˆ์—์„œ ๋‹ค๋ฅธ ํ•„๋“œ์˜ ๊ฐ’๋„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ

โ€ข
์ „์ฒด์ ์œผ๋กœ ๋””์ž์ธ์ด React Hook Form๊ณผ ๋น„์Šทํ•˜๋‚˜ ์ข€ ๋” ๋‹ค๋“ฌ์–ด์ง„ ๋А๋‚Œ์ด ๋“ ๋‹ค. ๊ท€์ฐฎ๊ณ , ๊ฑฐ์Šฌ๋ฆฌ๊ณ , ๋ถˆํŽธํ•œ ๋ถ€๋ถ„๋“ค์ด ๊ฐœ์„ ๋˜์—ˆ๋‹ค.
โ€ข
TanStack์ด๋ผ๋Š” ์Šคํƒ€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฃผ๋„ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ ๋งŒํผ ์ถœ์‹œ๋œ์ง€ ๋ช‡๊ฐœ์›”๋˜์ง€ ์•Š์•˜๋Š”๋ฐ๋„ 3.5k์˜ ์Šคํƒ€๋ฅผ ๋ฐ›์•˜๋‹ค.
โ€ข
์ธํ„ฐํŽ˜์ด์Šค ๋งŒํผ์€ ํ™•์‹คํžˆ ๊ดœ์ฐฎ์•„๋ณด์ธ๋‹ค. ์จ๋ณด๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค. ์‹ค์ œ๋กœ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ ๋ฒ„๊ทธ์˜ ์œ ๋ฌด ๋“ฑ์ด ๊ฒฐ๊ตญ์€ ๋ชจ๋“  ๊ฒƒ์„ ๊ฒฐ์ •ํ•ด์ค„ ๊ฒƒ์ด๋‹ค. React Hook Form๋„ ๋ง‰์ƒ ์ผ์„ ๋•Œ ์ค‘์ฒฉ๋œ ๋ฐฐ์—ด์„ ๋‹ค๋ฃฐ ๋•Œ์˜ ์น˜๋ช…์ ์ธ ๋ฌธ์ œ๋“ค์ด ๋ช‡๊ฐ€์ง€ ์žˆ์–ด์„œ ๊ณคํ˜น์„ ์น˜๋ฅธ ์ ์ด ์žˆ๋‹ค.
๐Ÿ‘