1. 핵심 요약
-
TanStack은 “React Query 제작자”로 시작했지만 지금은 멀티 프레임워크 풀스택 생태계로 확장됨.
-
핵심 철학: 멀티 프레임워크 지원, 일관된 DX, 타입 안전성, 확장 가능한 어댑터 구조.
-
최신 스택 구성요소:
- TanStack Query: 세계 React 앱의 30%가 사용하는 데이터 패칭 표준
- TanStack Form: Zod 기반·동기/비동기 검증·디자인 시스템 통합 폼 엔진
- TanStack DB: Firebase/Convex급 실시간 DB를 “벤더 종속 없이” 구현하는 Live Query Layer
- TanStack Router / Start: Next.js/Remix 대안이자 SPA+SSR 하이브리드 모델
- create-tanstack-app: CRA 대체 개발 환경
→ React Query 이후 TanStack의 전체 그림을 이해하면 “리액트 + SSR + 실시간 + 폼 + DB”를 하나의 패러다임으로 정리할 수 있다.
2. TanStack이란 무엇인가 (Why)
React Query → TanStack Query로의 진화
- useEffect + fetch 패턴을 제거하기 위한 목적에서 시작
- 자동 캐싱 / refetch / revalidation / mutation 관리 등
- TRPC·ORPC·다른 RPC 스택들의 기반 레이어로 채택될 정도로 탄탄함
- 전 세계 React 앱의 약 30%가 사용
즉, TanStack의 시작은 “데이터 패칭 난제를 표준화”하는 문제였음.
멀티 프레임워크化
React → Vue / Solid / Svelte / Angular 등으로 확장
→ “React 전용”이 아니라 웹 전반의 상태·패칭·폼·라우팅 생태계가 된 것.
TanStack 네이밍의 이유
- 브랜드 확장 및 검색성(SEO) 강화
- Query 외에도 Form·Router·Table·Virtual 등 다수의 도구들을 통합하기 위한 Umbrella 브랜드 필요
3. TanStack 공통 원칙
- 멀티 프레임워크 지원
- Type-safe 구조
- 일관된 DX
- 표준화된 API + 확장성
→ TanStack 생태계는 “프론트엔드 개발 전체에서 반복되는 문제”를 해결하는 공통 철학으로 설계됨.
4. TanStack Form — 복잡한 폼을 표준화 (What)
폼의 본질적 문제
- 동기/비동기 검증 혼재
- MUI/Tailwind/사내 디자인 시스템 적용 시 컴포넌트가 거대해짐
- 재사용·일관성·중복 제거가 어려움
- Formik/React Hook Form 등 기존 솔루션은 “콜백 지옥 + 디자인 시스템 분리 문제” 존재
TanStack Form의 해결 방식
1) Zod 기반 스키마 정의
- 검증 로직을 UI와 완전히 분리
- 서버 데이터·폼 값·API 요청/응답 모두 Zod로 일관 검증 가능
- 런타임 타입 안전성 제공
2) 동기/비동기 검증 모두 내장
- 주소 배송 가능 여부 검증 같은 API call도 검증 체인에 자연스럽게 포함
3) 컴포저블 디자인 시스템 통합
field.extend()을 통해 검증 + UI 컴포넌트가 합쳐진 “확장 필드 컴포넌트” 생성- 모든 폼에서 동일한 스타일·동일한 UX 보장
- 대형 조직(MUI·Nike·Walmart 스타일 시스템)에 적합
→ 폼을 “검증/상태/UI가 하나의 일관된 시스템”으로 만듦.
5. TanStack DB — CRUD를 실시간으로 재해석 (Why)
CRUD의 문제
- 서버에 POST/GET 반복
- 여러 사용자가 같은 데이터를 보고 있어도 실시간 변화 반영 불가
- 로직 대부분을 개발자가 직접 관리
- 모바일/협업/오프라인 환경에서 제약
Real-time DB의 장점
- Firebase / Convex처럼 “live query” 방식
- 재조회 없이 데이터가 자동 반영
- 다중 클라이언트 동기화
- 오프라인 우선 전략 가능
문제: Firebase/Convex는 벤더 락인
→ 백엔드를 옮기기 어려움.
TanStack DB의 접근
- Live Query / Live Collection 레이어를 프레임워크로 제공
- “어댑터”만 바꾸면 Firebase도 되고 Convex도 되고 PostgreSQL도 됨
- 개발자는 실시간 동기화 상태 관리만 신경, 백엔드는 선택 자유
즉,
Convex처럼 동작하지만 Convex에 종속되지 않는 실시간 DB 레이어
6. create-tanstack-app — CRA의 대안
React 공식에서 CRA를 폐기한 이후 생긴 문제 해결:
- 표준화된 개발 경험 제공
- Tailwind / DB / Form / Router / TRPC / ORPC 선택 포함
- Netlify·Neon·AI 연동까지 포함된 템플릿 구성
- CRA 기반 학습 자료를 그대로 활용 가능하도록 설계
→ React 개발 환경을 재정비한 “현대적 스타터 킷”.
7. TanStack Router & TanStack Start — Next.js / Remix 대체
TanStack Router
- 파일 기반 라우팅
- React Router와 유사하지만 TS 기반 타입 안정성이 더 강함
- 로더 기반 서버 데이터 패칭 지원
TanStack Start (SSR + SPA 통합 프레임워크)
Tanner가 강조하는 개념: SPA-first SSR
→ SPA의 DX + SSR의 SEO/성능을 혼합한 구조
Start의 핵심 기능
1) 파일 기반 라우팅
api.파일/디렉토리로 API 정의- 라우팅 엔진 자체를 구성 가능
2) 로더(Loader) 기반 데이터 패칭
- Remix 방식과 유사
- 타입 안전한 전역 데이터 흐름 가능
3) SSR 모드 2종
-
data-only SSR
- 렌더는 클라이언트에서 하되 필요한 데이터만 서버 프리패칭
- SPA UX 유지하면서 SEO 개선 가능
-
per-route SSR control
SSR: false/true/data-only- 라우트별 맞춤 렌더 전략
4) Server Functions (App Router 대체)
- GET/POST/PUT 등 HTTP 메서드 지정 가능
- Zod 기반 input validator
- 서버/클라이언트 context
- 라우트·API·함수 어디든 middleware 주입 가능
5) 배포제약 없음
- Cloudflare·Netlify 공식 지원
- Vercel·AWS 등 모든 환경 배포 가능
→ “클라우드 벤더 중립적인 Next.js 대안”
8. TanStack 생태계 전체 맵
- Query
- Router
- Start
- Form
- DB
- Table
- Virtual
- Chart (Partnered)
- AI/MCP 연동 기능
그리고 create-tanstack-app으로 전체 스택을 통합적으로 체험 가능.
9. 예시 데모: Guitar Store + AI 연동
- 파라미터 라우팅
- 인덱스 라우팅
- TanStack Query 기반 데이터 흐름
- TanStack Form 기반 폼 검증
- TanStack DB 기반 실시간 동기화
- AI 프롬프트 기능 포함
10. TanStack이 제공하는 실전 가치 (How)
1) 데이터 관리: React Query
- useEffect + fetch 완전 퇴출
- 캐싱·리트라이·최신성 유지 자동화
- async 에러 처리 일관화
2) 폼: TanStack Form
- 검증·UI·상태를 통합 관리
- 디자인 시스템과 자동 결합 가능
3) 실시간 DB: TanStack DB
- Firebase/Convex 스타일 실시간성
- 백엔드 종속 없음
4) 라우팅/SSR: TanStack Router & Start
- Next.js보다 단순한 모델
- Remix보다 개방적
- SPA-first의 현실적인 접근
- 파일 기반·서버 함수·middleware까지 통합
5) DX 강화
- 타입 안전
- 일관 DSL
- 여러 도구 간 조합성 극대화
- Vite 기반 빠른 개발 환경
원문 - What is TanStack?
okorion's Tech Study Blog.