[React] Section 17

1) 모든 키 입력마다 확인하며 이 값들을 어떤 상태 변수에 저장할 수 있고, (useState)

2) ref을 이용하여 사용자 값을 모두 입력했을 때 입력 값을 가져올 수도 있다. (useRef)

 

무엇을 사용할 지는 입력된 값으로 하고자 하는 일에 따라 다르다.

 

값이 한 번만 필요하다면? useRef

 

즉각적인 유효성 검증을 위해 키 입력마다 입력 값이 필요하다면? useState

입력된 값을 초기화 하고 싶다면? useState

 

입력된 값을 초기화 하는 것은 useRef로도 가능은 하지만 DOM을 직접 조작하는 것이기 때문에 좋은 방법이 아니다!!!

 

브라우저에서 유효성 검증하는 방식은 사용자 경험 측면에서 빠른 반응을 할 수 있으므로 좋다

그러나 서버에서도 검증되어야 하는데, 그 이유는 브라우저에 있는 코드는 사용자에 의해 편집될 수 있기 때문이다.

-> 이는 사용자 경험을 위한 것이지 보안 메커니즘 같은 것이 아니다.

 

    if (enteredName.trim() === "") {
      return;
    }

 

-> 입력된 값이 유효하지 않으면 함수의 뒷부분을 실행되지 않게 한다.

 

  const [enteredNameIsValid, setEnteredNameIsValid] = useState(true);

  useEffect(() => {
    if (enteredNameIsValid) {
      console.log("Name Input is valid");
    }
  }, [enteredNameIsValid]);

 

-> 초기값을 true로 설정할 경우 좋지 않은 코드이다. (임시방편일 뿐!!!)

 

 const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;

 

-> 그래서 위와 같은 상수를 만들고 이를 적용해준다.

 

전체 양식 유효성 관리하기

useEffect(() => {
    if (enteredNameIsValid) {
      setFormIsValid(true);
    } else {
      setFormIsValid(false);
    }
  }, [enteredNameIsValid]);

 

-> 굳이 이렇게 해 줄 필요가 없다. (재평가를 할 때 추가적인 컴포넌트만 생길 뿐이라 손해이다)

 

  let formIsValid = false;

  if (enteredNameIsValid) {
    formIsValid = true;
  }

 

-> 더 좋은 방식!!!

 

Formik

매우 인기있는 써드 파티 라이브러리로 폼을 만드는데 유용하다.

핵심은 상태를 관리하는 로직을 덜 써도 되는 것이다.

검증 로직만 입력하면 훅이 상태를 알아서 확인해준다.