snax
Sign In
SNAX
Jul 11, 2024
Jul 11, 2024
TanStack Form ์ถ์
TanStack Query(React Query)์ ๊ฐ๋ฐ์ TanStack์ด ๋ด๋์ ์๋ก์ด ์์(Form) ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
์ถ์์ผ:
2024๋ 4์ 27์ผ
๋งํฌ:
https://tanstack.com/form/latest
โข
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๋ ๋ง์ ์ผ์ ๋ ์ค์ฒฉ๋ ๋ฐฐ์ด์ ๋ค๋ฃฐ ๋์ ์น๋ช ์ ์ธ ๋ฌธ์ ๋ค์ด ๋ช๊ฐ์ง ์์ด์ ๊ณคํน์ ์น๋ฅธ ์ ์ด ์๋ค.
TanStack Form
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid and Lit
tanstack.com