Section 11. Form과 user input

📍 Form?

Form에서는 하나 이상의 다양한 입력을 받기 때문에 다양하고 많은 양의 state를 다루게 된다. 하나 이상의 입력 값이 모두 유효하거나 모두 유효하지 않을 수 있다. 또는 서버로 request를 보낸 후에 특정 값이 사용 가능한지 확인하는 비동기 유효성 검사를 이용하는 경우에는 전송 당시 상태를 알 수 없을 수도 있다.

이렇게 유효하지 않은 값을 유저가 입력할 경우 유효한 값을 입력할 수 있도록 특정한 입력값에 대해서 에러 메시지를 출력하고 문제가 되는 입력값을 강조해야 한다. 이 경우에도 정말 많은 상태를 다루게 된다. 따라서 이러한 상태관리에 대해 간략하게 다뤄보고자 한다.

사용자에게 에러메시지를 띄우는 순간은 크게 3가지로 나누어볼 수 있다.

1. 사용자가 form submit 버튼을 누른 순간
2. 사용자가 입력하는 form의 input에서 focus가 제외된 순간
3. 사용자가 입력하는 순간순간 (every keystroke)

1. 사용자가 form submit 버튼을 누른 순간

📍 사용자 입력을 받아오기

1. 사용자가 input에 값을 입력할 때 마다 state에 저장하기

• 즉각적인 유효성 검증을 위해 사용자가 입력한 값이 키 입력마다 필요할 경우
• 입력된 값을 초기화하고 싶은 경우
  (ref로도 가능하지만, DOM을 직접적으로 조작하게 되므로 지양해야한다)

import {useRef, useState} from 'react';

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState('');

  // input의 값 받아오기
  const nameInputChangeHandler = event => {
    setEnteredName(event.target.value);
  };

  // form submit할 때 로직
  const formSubmissionHandler = event => {
    event.preventDefault(); 
    
    // 입력값 초기화
	setEnteredName('');
  };

  return (
    <form onSubmit={formSubmissionHandler}>
        <input 
          type='text' 
          id='name' 
          onChange={nameInputChangeHandler}
          value= {enteredName}
         />
    </form>
  );
};

export default SimpleInput;

2. ref를 사용해서 사용자의 입력이 끝났을 때 입력값 가져오기

• 사용자가 입력한 값이 폼이 제출되었을 때 한 번만 필요한 경우

import {useRef, useState} from 'react';

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState('');
  const nameInputRef = useRef();

  const nameInputChangeHandler = event => {
    setEnteredName(event.target.value);
  };

  const formSubmissionHandler = event => {
    event.preventDefault(); 

    // submit 버튼이 눌렸을 때 입력된 값을 가져온다
    const enteredValue = nameInputRef.current.value;
  };

  return (
    <form onSubmit={formSubmissionHandler}>
      // ref 연결하기
        <input ref={nameInputRef} type='text' id='name' onChange={nameInputChangeHandler}/>
    </form>
  );
};

export default SimpleInput;

---

📍 유효성 검증 추가하기 - 올바른 값인가?

import { useState } from 'react';

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState('');
  // input 유효성 검증 state
  const [enteredNameIsValid, setEnteredNameIsValid] = useState(true);

  const nameInputChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };

  const formSubmissionHandler = (event) => {
    event.preventDefault();

    // input에 아무런 값이 입력되지 않은 경우
    if (enteredName.trim() === '') {
      setEnteredNameIsValid(false);
      return;
    }

    setEnteredNameIsValid(true);
    setEnteredName('');
  };

  // invalid한 값일 경우 css class 동적 적용
  const nameInputClasses = enteredNameIsValid ? 'form-control' : 'form-control invalid'

  return (
    <form onSubmit={formSubmissionHandler}>
      <div className={nameInputClasses}>
        <label htmlFor="name">Y our Name</label>
        <input 
          type="text" 
          id="name" 
          onChange={nameInputChangeHandler} 
          value={enteredName}
        />
        {/* 유효성 여부에 따라 에러 메시지 띄우기 */}
        {!enteredNameIsValid && <p className='error-text'>Name must not be empty</p>}
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

export default SimpleInput;

이 방식의 문제점은 처음부터 에러를 띄우지 않기 위해서 일단 input에 입력된 값이 valid라고 설정하고 시작한다는 것이다. 이 방법은 일종의 속임수이자 편법인 방법이라 지금은 문제 없이 작동하지만 만약 useEffect()를 사용해서 입력값이 유효할 경우 httpRequest를 보낸다면 useEffect()의 특성상 dependencies에 아무것도 없다면 컴포넌트가 렌더링될 때 무조건 실행되므로, valid의 초기값을 true로 설정했기 때문에 아직 사용자가 input에 아무것도 입력 안했음에도 불구하고 http request를 보내버리는 일이 발생한다.

따라서 input이 touch 되었는지 확인하는 state를 하나 더 선언해서 valid state와 같이 사용하면 더욱 좋은 코드가 될 수 있다!

📍 유효성 검증 추가하기 - input이 터치 되었는가?

import { useState } from 'react';

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState('');
  // input 유효성 검증 state
  const [enteredNameIsValid, setEnteredNameIsValid] = useState(false);
  // input에 값을 입력했는지 확인
  const [enteredNameTouched, setEnteredNameTouched] = useState(false);

  const nameInputChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };

  const formSubmissionHandler = (event) => {
    event.preventDefault();

    // form을 submit한 경우는 input을 다 touch한 것으로 간주
    setEnteredNameTouched(true);
    // input에 아무런 값이 입력되지 않은 경우
    if (enteredName.trim() === '') {
      setEnteredNameIsValid(false);
      return;
    }

    setEnteredNameIsValid(true);
    setEnteredName('');
  };

  // invalid한 경우 = 입력값이 유효하지 않음 + 입력창을 touch한 경우
  const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;

  // invalid한 값일 경우 css class 동적 적용
  const nameInputClasses = nameInputIsInvalid ? 'form-control invalid' : 'form-control';

  return (
    <form onSubmit={formSubmissionHandler}>
      <div className={nameInputClasses}>
        <label htmlFor="name">Y our Name</label>
        <input type="text" id="name" onChange={nameInputChangeHandler} value={enteredName} />
        {/* 유효성 여부에 따라 에러 메시지 띄우기 */}
        {nameInputIsInvalid && <p className="error-text">Name must not be empty</p>}
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

export default SimpleInput;

코드가 더 길어지긴 했지만 예상치 못한 에러를 방지할 수 있다!

---

2. 사용자가 입력하는 form의 input에서 focus가 제외된 순간

1번의 방법에서는 submit 버튼을 눌러서 submithandler가 동작할 경우에만 입력값이 유효한지 아닌지에 따른 에러메시지를 유저에게 보여준다. 이 경우에는 사용자가 만약 입력 후 다 지우고 input 칸을 비워뒀을 경우 submit 버튼을 누르기 전까지는 에러 메시지가 출력되지 않는다. 이는 사용자가 경험하기에 최선의 경험이라고 할 수 없다.
따라서 onblur를 사용하여 input에서 focus가 사라졌을 경우 유효성을 따져서 사용자에게 에러메시지를 띄워주는 방법으로 변경해보자.

기존에 input을 touch했는지 안 했는지를 따지는 로직을 nameInputBlurHandler에 추가한다.

const SimpleInput = (props) => {
  ...
  // focus out 됐을 때 input의 값 확인
  const nameInputBlurHandler = (event) => {
    setEnteredNameTouched(true);
    if (enteredName.trim() === '') {
      setEnteredNameIsValid(false);
      return;
    }
  };
  
  return (
  	<form>
      ...
      <input 
        type="text" 
        id="name" 
        onChange={nameInputChangeHandler} 
        // focus out 됐을 때!
        onBlur={nameInputBlurHandler}
        value={enteredName} 
       />
    </form>
  )
}

이 경우의 문제점은 사용자가 에러메시지를 보고 다시 input에 값을 입력하여 valid한 값이 되어도 submit버튼을 누르기 전까지는 띄워둔 에러메시지가 없어지지 않는 구조이다.

따라서 마지막 세번째 방법인 모든 keystroke에 따라 유효성을 판단하는 방법을 섞어서 사용하면 최고의 사용자 경험을 제공할 수 있다. 만약 단지 keystroke에만 의존하여 유효성을 판단한다면 사용자의 모든 입력에 따라 검증단계를 거치기 때문에 좋지 못한 로직이라고 할 수있다. 하지만, 2번과 결합해서 focus를 잃고, 다시 focus를 받은 후의 모든 keystroke을 따진다면 보다 효율적인 유효성 검증 방법이 될 수 있다.

---

📍 3. 사용자가 입력하는 순간순간 (every keystroke)

유효성을 검증하는 부분은 모두 코드가 동일하기 때문에 모든 handler를 상대로 동일한 유효성 검증 코드를 넣는 것 보다, 유효성 검증 부분을 하나의 변수에 저장하여 사용하는 것이 더 보기 좋은 코드이다.

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState('');
  const [enteredNameTouched, setEnteredNameTouched] = useState(false);

  // 유효성 검증부분을 따로 변수에 저장
  const enteredNameIsValid = enteredName.trim() !== '';
  const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;

  // keystroke 마다
  const nameInputChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };

  // focus를 잃을 때
  const nameInputBlurHandler = (event) => {
    setEnteredNameTouched(true);
  };

  // submit 버튼을 눌렀을 때
  const formSubmissionHandler = (event) => {
    event.preventDefault();

    setEnteredNameTouched(true);
    // input에 아무런 값이 입력되지 않은 경우
    if (!enteredNameIsValid) {
      return;
    }

    setEnteredName('');
    setEnteredNameTouched(false);
  };
  
  return (...)
}

---

📍 전체 양식의 유효성 확인

현재는 하나의 input에서 받아오는 값에 대한 유효성만을 확인하지만, 보통의 경우에는 input이 여러개 사용되고, 해당 form들이 모두 유효해야한다. 전체 양식이 유효한지 알아보려면 어떻게 해야할까?

1. 전체 form이 유효한지 아닌지 확인하는 state 추가
2. 각 form의 유효성 여부를 dependency로 추가한 useEffect활용

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState('');
  const [enteredNameTouched, setEnteredNameTouched] = useState(false);
  // 전체 form의 유효성 검사
  const [formIsValid, setFormIsValid] = useState(false);

  const enteredNameIsValid = enteredName.trim() !== '';
  const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;

  // component가 처음 실행될 때, dependency의 값이 바뀔 때 함수가 실행됨
  // 모든 form이 valid한지 확인하려함!
  useEffect(()=> {
    if (enteredNameIsValid) {
      setFormIsValid(true);
    } else {
      setFormIsValid(false);
    }
  }, [enteredNameIsValid]);
  
  return (...)
}

하지만 사실 useEffect 내부에서 side effect를 처리하는게 아니므로 useEffect를 사용할 이유가 없다. 따라서 단순하게 전체 form이 valid한지를 boolean값으로 저장하는 변수를 두고, 해당 컴포넌트에서 사용하는 모든 form의 valid여부를 if문으로 두어서 전체 form의 유효성여부를 업데이트하면 된다!

...
  const [enteredName, setEnteredName] = useState('');
  const [enteredNameTouched, setEnteredNameTouched] = useState(false);

  // 컴포넌트에서 사용하는 form들의 유효성여부 확인하는 부분
  const enteredNameIsValid = enteredName.trim() !== '';
  const enteredAgeIsValid = enteredName.trim() !== '';
  const enteredEmailIsValid = enteredName.trim() !== '';

  const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;

  // 전체 form의 valid 여부 확인 변수
  let formIsValid = false;
  if (enteredNameIsValid && enteredAgeIsValid && enteredEmailIsValid) {
    formIsValid = true;
  } 

중복된 부분 제거하기! - custom Hook

유효성을 검증하는 부분이 input 태그마다 로직이 같으니 이 부분을 계속해서 작성하기보다는 custom Hook으로 만들어서 사용하는 방법이 있다.

useInput custom Hook 만들기

import { useState } from 'react';

const useInput = (validateValue) => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isTouched, setIsTouched] = useState(false);

  const valueIsValid = validateValue(enteredValue);
  const hasError = !valueIsValid && isTouched;

  const valueChangedHandler = (event) => {
    setEnteredValue(event.target.value);
  };
  const inputBlurHandler = (event) => {
    setIsTouched(true);
  };

  const reset = () => {
    setEnteredValue('');
    setIsTouched(false);
  }

  return {
    value: enteredValue,
    isValid: valueIsValid,
    hasError,
    valueChangedHandler,
    inputBlurHandler,
    reset
  };
};

export default useInput;

사용하기

import useInput from '../hooks/use-input';

// alias 이용해서 return 값들을 name과 email에 각각 사용하기!
const SimpleInput = (props) => {
  const {
    value: enteredName,
    isValid: enteredNameIsValid,
    hasError: nameInputHasError,
    valueChangedHandler: nameChangedHandler,
    inputBlurHandler: nameBlurHandler,
    reset: resetNameInput,
  } = useInput((value) => value.trim() !== '');

  const {
    value: enteredEmail,
    isValid: enteredEmailIsvalid,
    hasError: emailInputHasError,
    valueChangedHandler: emailChangeHandler,
    inputBlurHandler: emailBlurHandler,
    reset: resetEmailInput,
  } = useInput((value) => value.includes('@') && value.includes('.'));

  let formIsValid = false;
  if (enteredNameIsValid && enteredEmailIsvalid) {
    formIsValid = true;
  }

  // form submit!
  const formSubmissionHandler = (event) => {
    event.preventDefault();

    // input에 아무런 값이 입력되지 않은 경우
    if (!enteredNameIsValid || !enteredEmailIsvalid) {
      return;
    }

    resetNameInput();
    resetEmailInput();
  };

  // invalid한 값일 경우 css class 동적 적용
  const nameInputClasses = nameInputHasError ? 'form-control invalid' : 'form-control';
  const emailInputClasses = emailInputHasError ? 'form-control invalid' : 'form-control';

  return (...생략);
};

export default SimpleInput;

---

formIk 라이브러리

FORMIK 공식문서