Why not field-level validations? - 정리

https://goshakkk.name/y-no-field-level-validations/ 정리함

요약

전체

• 왜 필드 수준의 검증을 하지 않는가?에 대한 이야기를 하자.
• 만약 리액트에서 유효성 검증을 할 때가 있다. 보통 그럴 떄 <Input isRequried />으로 에러 메세지를 넘겨주면 매우 편해질 때까 있다.
• 이런식으로 보일러 플레이트를 줄이는 것은 매우 유용할 수 있지만 다음과 같은 문제들이 있다.
  1. 검증 상태가 로컬 필드가 아닐 경우
  2. 모든 검증이 필즈 중심적이 아니다.
  3. 데이터 흐름의 역전
  4. 모든 필드들이 스크린 위에 있어야 한다.

1. 검증 상태는 로컬 필드가 아니다.

• 검증상태가 각 input에 갖고 있으면 전체적은 폼 컴포는트가 알 수 없어 다음과 같은 문제를 낳는다.
  • 그럼 submit 버튼을 disable하고 싶다거나, 유효성 상태 등에 따라 다른 필드를 조건부로 표시할 수 없다.
  • onValidationStatusChanged으로 각 input에 넘겨줄 수도 있지만, 결국 이 방식은 보일러플레이트를 증가시키면서 다른 이슈를 만든다.
    • 암시된 api들은 이해하를 어렵게 만든다.
    • 데이터 흐름을 거꾸로 하게 한다.

2. 모든 검증들이 다 필드 중섬적이진 않는다.

• 어떤 검증들은 필드 하나에서만 일어나지만, 항상 그렇지는 않다.
• 필드 중심의 접근 방식을 위해선 다른 api를 도입해야 하는데, 이는 결국 보일러플레이트를 만들어 벌인다. 결국 본질적으로 같은 문제에 대한 두 가지 api를 만들어벌인다.

3. 데이터흐름의 역전

• 리엑트에선 일반적으로 뷰는 데이터의 상태이다. 투두 리스트의 모습은 투두 객체 리스트의 모습이다.
• 폼도 마찬가지이다. 폼 데이터의 뷰이다. 폼은 자신의 데이터를 가지고 있다. 폼 내부 어딘가에서 데이터 유효성 검증 규칙을 표현한다면 당연하다. 폼 컴포넌트는 유닛을 뿐이다.
• 하지만 유효성 검증을 렌더안에서 만들어버리면, 유효성을 이해하기 위해 render 메서드를 신중하게 살펴봐야한다. 이는 좋지 않다.

4. 모든 필드들이 스크린 위에 있어야 한다.

• 필드 중심적이라면 멀티스텝 폼 같은 경우에 문제가 생긴다.

정리

1. 검증 상태는 로컬 필드가 아니다.

검증 상태는 각 input 컴포넌트에서 가지고 있어야하낟. 하지만 폼 컴포넌트는 특정한 필드가 유효한지 알 수 없다.

이건 다음과 같은 의미를 가진다.

• 너가 submit 버튼을 disable하게 하고 싶을 때, 어떤 필드가 유요하지 않다면.
• 이 필드의 유효성 상태 등에 따라 다른 필드를 조건부로 표시한다.

onValidationStatusChanged으로 각 input에 넘겨주는 생각을 바로 떠올렬 수도 있지만, 결국 전체 코드의 보일러플레이트를 증가시킨다. 또한 다른 이슈들 또한 만든다.

자동적으로 폼 컴포넌트에 검증 상태를 넣는 방식은 실제로 React Reform이란데서 사용하고 있다. 하지만 이 방식 또한 문제가 있다.

• 암시된 API들은 이해하기 어렵게 된다.
• 데이터 흐름이 거꾸로 된다.

2. 모든 검증들이 필드-중심적은 아니다.

어떤 검증들은 하나의 필드에서만 일어난다. 항상 중심적인 경우만 있지 않다.

필드 중심의 접근 방식을 위해서는 다른 API를 도입해야 하는데, 이는 없애고자 하는 보일러 플레이트처럼, 단지 이 경우를 돕기위해서이다. 결국 보일레 플레이트는 제거되지 않는다. 하지만 결국 본질적으로 같은 것에대한 좇같은 두 가지 API를 가질 뿐이다.

3. 데이터흐름의 역전

리액트에선 일반적으로 몇몇의 데이터와 상태가 뷰로 나타난다. 투두 앱이라면, 투투 리스트는 투두 객체 리스트의 뷰이다.

같은 방식으로 폼은 폼 데이터의 뷰일 뿐이다. 폼이 자신의 데이터를 가지고 있다. 폼이 내부 어딘가에서 데이터 유효성 검증규칙을 표현한다면 당연한 것이다. 폼 컴포넌트는 유닛을 뿐이라고 말할 수 있다.

하지만 검증이 렌더안에 있다면, 이 데이터 관계는 효과적으로 제거된다.

자체적으로 검사하기

function validate(email, password) {
  // true means invalid, so our conditions got reversed
  return {
    email: email.length === 0,
    password: password.length === 0,
  };
}

리덕스폼은 데이터 관계를 first-class로 만든다. 폼 데코레이터안에 검증함수를 받으들이므로서

const validate = values => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  return errors;
}
export default reduxForm({
  form: 'signInForm',
  validate,
})(SignInForm)

4. 모든 필드들은 스크린위에 있어야 한다.

가끔, 화면 위에 모든 것들이 검증되기 원할 수 있다. 만약 필드가 보이지 않는 경우에도 말이다. 예를 들면 멀티 스텝 폼 같은 경우가 있을 수 있다.