패스트캠퍼스 챌린지 33일차

회원 가입 폼 - 정보 UX 선택하기

 

예전 화면 방식을 살펴보면 정보를 전부 입력하고 submit 버튼을 눌렀을 때, 입력된 정보들의 밸리데이션을 체크하고 최종적으로 사용자에게 결과를 반환해준다.

 

하지만 해당 방식은 잘 사용하지 않는다. 사용자에게 가능한 즉시 결과를 반환해주고 수정할 수 있도록 하는 추세이다. 또한 한번도 입력하지 않았을 시에는 밸리데이션 체크를 하지않으며 한번 이상 입력을 하고 나왔을 시엔 밸리데이션 체크를 하도록 설계한다.

 

export default class TextField {
  private template = template;
  private container: string;
  private data: Props;  
  private updated: boolean = false;
  private validateRules: ValidateRule[] = [];

  constructor(container: string, data: Props) {
    this.container = container;
    this.data = { ...DefaultProps, ...data };

    if (this.data.require) {
      this.addValidateRule(RequireRule);
    }

    ...
  }

  private validate = (): ValidateRule | null => {
    ...
  }

  private buildData = () => {
	...
  }

  private onChange = (e: Event) => {
    const { value, id } = e.target as HTMLInputElement;
  
    if (id === this.data.id) {
      this.updated = true;
      this.data.text = value;
      this.update();
    }
  }

  private attachEventHandler = () => {
    document.querySelector(this.container)?.addEventListener('change', this.onChange);
  }

  private update = () => {
    ...
  }

  public get name(): string {
    ...
  }

  public get value(): string {
    ...
  }

  public get isValid(): boolean {
    ...
  }

  public addValidateRule = (rule:ValidateRule) => {
    ...
  }

  public render = (append: boolean = false) => {
   ...
  }
}

 

해당하는 필드에 값을 체크하기 위해선 이벤트리스너의 change 값을 체크 해보아야한다. attactchEventHandler 메소드에서 그 작업을 하며, change의 콜백으로 onChange 메소드를 사용한다.

 

onChange 메소드에서는 해당하는 이벤트 타겟의 value와 id 값을 가져와서 App 클래스에 TextField의 인스턴스로 지정 되어있는 id 값과 비교한다. 이유는 필드는 TextField, PasswordField, AddressField 클래스로 나누어져 있고 각 해당하는 필드는 인스턴스로 생성되어 있기 때문이다.

 

돌아와서, onChange 메소드에서 id 값을 체크하고 맞다면 this.updated 변수가 true가 된다. 이 부분이 위에서 설명했던 필드 값에 한번 이상 진입을 했는지 안했는지 체크를 하는 부분이다. 그리고 해당하는 this.data 오브젝트의 text 부분에 입력한 값을 저장하고 update 메소드를 실행한다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential