Philosophy  철학

Every well-established project should have a philosophy that guides its development. Without a core philosophy, development can languish in endless decision-making and have weaker APIs as a result.
모든 잘 확립된 프로젝트는 개발을 안내하는 철학을 가져야 합니다. 핵심 철학이 없으면 개발은 끝없는 의사 결정에 허덕일 수 있으며 그 결과로 API가 약해질 수 있습니다.

This document outlines the core principles that drive the development and feature-set of TanStack Form.
이 문서는 TanStack Form의 개발 및 기능 세트를 이끄는 핵심 원칙을 설명합니다.

APIs come with tradeoffs. As a result, it can be tempting to make each set of tradeoffs available to the user through different APIs. However, this can lead to a fragmented API that is harder to learn and use.
API는 상충이 있습니다. 그 결과, 각 상충 세트를 서로 다른 API를 통해 사용자에게 제공하는 것이 유혹적일 수 있습니다. 그러나 이는 배우고 사용하기 더 어려운 단편화된 API로 이어질 수 있습니다.

While this may mean a higher learning curve, it means that you don't have to question which API to use internally or have higher cognitive overhead when switching between APIs.
이것은 더 높은 학습 곡선을 의미할 수 있지만, 내부적으로 어떤 API를 사용할지 의문을 가질 필요가 없고 API 간 전환 시 더 높은 인지적 부담을 느낄 필요가 없다는 것을 의미합니다.

TanStack Form is designed to be flexible and customizable. While many forms may conform to similar patterns, there are always exceptions; especially when forms are a core component of your application.
TanStack Form은 유연하고 사용자 정의가 가능하도록 설계되었습니다. 많은 양식이 유사한 패턴에 따를 수 있지만, 항상 예외가 있습니다. 특히 양식이 애플리케이션의 핵심 구성 요소일 때 그렇습니다.

As a result, TanStack Form supports multiple methods for validation:
결과적으로, TanStack Form은 유효성을 검사하기 위한 여러 방법을 지원합니다:

• Timing customizations: You can validate on blur, change, submit, or even on mount.
  타이밍 사용자 정의: 포커스 아웃, 변경, 제출 또는 마운트 시 유효성을 검사할 수 있습니다.
• Validation strategies: You can validate on individual fields, the entire form, or a subset of fields.
  검증 전략: 개별 필드, 전체 양식 또는 필드의 하위 집합에서 검증할 수 있습니다.
• Custom validation logic: You can write your own validation logic or use a library like Zod or Valibot.
  사용자 정의 유효성 검사 로직: 자체 유효성 검사 로직을 작성하거나 Zod 또는 Valibot과 같은 라이브러리를 사용할 수 있습니다.
• Custom error messages: You can customize the error messages for each field by returning any object from a validator.
  사용자 정의 오류 메시지: 유효성 검사기에서 객체를 반환하여 각 필드에 대한 오류 메시지를 사용자 정의할 수 있습니다.
• Async validation: You can validate fields asynchronously and have common utils like debouncing and cancellation handled for you.
  비동기 검증: 필드를 비동기적으로 검증할 수 있으며, 디바운싱 및 취소와 같은 공통 유틸리티가 자동으로 처리됩니다.

In a world where controlled vs uncontrolled inputs are a hot topic, TanStack Form is firmly in the controlled camp.
제어된 입력과 비제어된 입력이 뜨거운 주제인 세상에서, TanStack Form은 확고하게 제어된 캠프에 속해 있습니다.

This comes with a number of advantages:
이것은 여러 가지 장점이 있습니다:

• Predictable: You can predict the state of your form at any point in time.
  예측 가능: 언제든지 양식의 상태를 예측할 수 있습니다.
• Easier testing: You can easily test your forms by passing in values and asserting on the output.
  더 쉬운 테스트: 값을 전달하고 출력에 대해 단언함으로써 양식을 쉽게 테스트할 수 있습니다.
• Non-DOM support: You can use TanStack Form with React Native, Three.js framework adapters, or any other framework renderer.
  비DOM 지원: TanStack Form을 React Native, Three.js 프레임워크 어댑터 또는 기타 프레임워크 렌더러와 함께 사용할 수 있습니다.
• Enhanced conditional logic: You can easily conditionally show/hide fields based on the form state.
  향상된 조건부 로직: 양식 상태에 따라 필드를 쉽게 조건부로 표시/숨길 수 있습니다.
• Debugging: You can easily log the form state to the console to debug issues.
  디버깅: 문제를 디버깅하기 위해 양식 상태를 콘솔에 쉽게 기록할 수 있습니다.

You should never need to pass a generic or use an internal type when leveraging TanStack Form. This is because we've designed the library to inference everything from runtime defaults.
TanStack Form을 활용할 때 일반적인 타입이나 내부 타입을 전달할 필요는 없습니다. 이는 라이브러리가 런타임 기본값에서 모든 것을 추론하도록 설계되었기 때문입니다.

When writing sufficiently correct TanStack Form code, you should not be able to distinguish between JavaScript usage and TypeScript usage, with the exception of any type casts you might do of runtime values.
충분히 올바른 TanStack Form 코드를 작성할 때, 런타임 값의 타입 캐스트를 제외하고는 JavaScript 사용과 TypeScript 사용을 구분할 수 없어야 합니다.

Instead of:  대신:

useForm<MyForm>()

useForm<MyForm>()

You should do:  당신이 해야 할 일:

useForm({
  defaultValues: {
    name: 'Bill Luo',
    age: 24,
  } as MyForm,
})

useForm({
  defaultValues: {
    name: 'Bill Luo',
    age: 24,
  } as MyForm,
})

One of the main objectives of TanStack Form is that you should be wrapping it into your own component system or design system.
TanStack Form의 주요 목표 중 하나는 이를 자신의 컴포넌트 시스템이나 디자인 시스템에 감싸야 한다는 것입니다.

To support this, we have a number of utilities that make it easier to build your own components and customized hooks:
이를 지원하기 위해, 우리는 자체 구성 요소와 맞춤형 훅을 쉽게 구축할 수 있도록 여러 유틸리티를 제공합니다:

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

// Exported from your own library with pre-bound components for your forms.
export const { useAppForm, withForm } = createFormHook(/* options */)

Without doing so, you're adding substantially more boilerplate to your apps and making your forms less consistent and user-friendly.
그렇지 않으면 앱에 상당히 더 많은 보일러플레이트를 추가하고 양식을 덜 일관되게 만들며 사용자 친화성을 떨어뜨립니다.