Trim 유효성검증

공백만 입력된 경우는 미입력과 동일하게 취급하고, 제출 시점에는 trim된 값을 보냅니다.

핵심: 폼 데이터는 공백이 포함된 원본 그대로 유지하고, 유효성검증과 trim을 분리합니다.

BAD기본 required만 사용

공백만 입력해도 통과됩니다. " " 입력 후 제출해보세요.

GOOD유효성검증 + trim 분리

공백만 입력하면 에러, 앞뒤 공백은 제출 시 자동 제거됩니다.

왜 유효성검증과 trim을 분리하는가?

시도: onChange에서 실시간 trim

<input
  {...register('address', {
    onChange: (e) => {
      e.target.value = e.target.value.trim();
    },
  })}
/>

"101동" 입력 후 " 105호"를 이어 쓰려고 스페이스바를 누르면 공백이 즉시 제거됩니다.

입력 도중에 값을 가로채면 안 되므로, 폼 데이터는 ' 홍길동 '처럼 공백이 포함된 원본 그대로 들고 있어야 합니다. 유효성검증은 원본값으로 하고, trim은 제출 시점에 수행합니다.

3. 서버 전송 시 일괄 trim

필드가 하나라면 data.name.trim()으로 충분하지만, 실무 폼은 필드가 수십 개입니다. 하나하나 trim하는 건 비현실적이므로, 객체를 재귀 순회하며 모든 문자열을 한번에 trim하는 유틸리티 함수를 만들어 사용합니다.

const formData = {
  name: '  홍길동  ',
  address: '  서울시 강남구  ',
  memo: '   ',
};

trimObject(formData);
// → { name: '홍길동', address: '서울시 강남구', memo: '' }

trimObject()는 중첩된 객체와 배열도 재귀적으로 순회합니다. 서버로 보내기 직전에 trimObject(formData) 한 줄이면 모든 문자열 필드가 정리됩니다.