유효성 검증 훅 개발 및 고찰

유효성 검증 구현

• 프론트엔드 개발자는 서버에 올바른 데이터를 전달하기 위해서 유효성 검사를 고려해보아야 합니다.
• 저의 경우에는 댓글을 다는 기능을 구현했었고, 서버에는 닉네임, 비밀번호, 댓글 내용을 전송해야 했습니다.
• 저는 유효성 검증을 통해 너무 짧거나 긴 닉네임, 비밀번호, 댓글 내용이 서버로 전달되는 것을 사전에 방지하고자 했습니다.

유효성 검증을 통해 너무 짧거나 긴 데이터는 사전에 걸러주고자 했습니다.

구상

• 유효성 검증 기능 구현 자체는 어렵지 않았습니다.
• 그래서, 어떻게 코드를 도입해야 기존 로직이 깔끔하게 보일 수 있을지 고려 해보았습니다.
• 코드의 로직을 깔끔하게 하려면 응집도가 있는 코드들끼리 모으는 것을 베스트라고 생각했고,
  유효성 검증 기능을 커스텀 훅으로 빼면 좋겠다는 생각을 했습니다.

 

useValidation

• 원시적인 형태의 훅을 개발했습니다.
• useValidation은 에러 상태와 에러 메세지를 state 객체로 관리하며, validator 함수에 의해 state가 변경됩니다.

import { useState } from "react";

export default function useValidation() {
  const [error, setError] = useState({
    isError: false,
    errorMessage: "",
  });

  const validator = (name: string, password: string, comment: string) => {
    if (name.length < 2 || name.length > 10) {
      setError({
        isError: true,
        errorMessage: "닉네임은 2글자 이상 입력해주세요!",
      });
      return false;
    } else if (password.length < 4) {
      setError({
        isError: true,
        errorMessage: "비밀번호는 4글자 이상 입력해주세요!",
      });
      return false;
    } else if (comment.length < 1 || comment.length > 200) {
      setError({
        isError: true,
        errorMessage: "댓글은 1글자 이상 200글자 이하로 입력해주세요!",
      });
      return false;
    }

    setError({
      isError: false,
      errorMessage: "",
    });

    return true;
  };

  return { validator, error, setError };
}

• 훅을 사용할 컴포넌트에 validator 함수와 state, state setter function을 모두 전달합니다.

훅을 컴포넌트의 최상단에 호출합니다.

• 그리고 아래와 같은 로직으로 validator 기능을 활용합니다.

흐름도를 표현했습니다.

• 엔터 버튼을 눌러서 서버에 댓글을 전송해도 되고, 단순 클릭만을 통해서 서버에 댓글을 전송해도 됩니다.
• 대신 서버에 전송하는 기능과 유효성 검증은 모두 handleSubmit이 도맡아 하게 됩니다.
• 따라서 handleOnKeyPress는 handleSubmit의 트리거가 될 뿐입니다.

  const handleOnKeyPress = (event) => {
    event.preventDefault();
    if (event.key === "Enter" && event.shiftKey) {
      return;
    }
    if (event.key === "Enter") {
      handleSubmit(event);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValidInfo = validator(
      commentInfo.nickname,
      commentInfo.password,
      commentInfo.comment
    );

    if (isValidInfo) {
      addComment({ ...commentInfo });
    }
  };

• 결과적으로... 의도한대로 동작했습니다!

 

고찰

• 컴포넌트와 훅의 분리는 잘 했다고 생각했으나, 훅 내부의 코드가 그렇게 깔끔한 것 같지는 않았습니다.
• 에러와 에러메세지를 useReducer로 관리하고, 닉네임, 비밀번호, 댓글에 대한 에러메세지를 각각의 state로 관리해도 좋지 않을까 생각을 해보게 되었습니다. 대신 화면단에서 들여야 할 노동력도 그만큼 커질 수 있을 것 같습니다.
• useValidation 훅을 선언할 때, 유효성 검증에 관련된 option 객체를 함께 전달해서, 에러 메세지나 유효성 조건 등을 동적으로 전달할 수 있지 않을까 생각을 해보았습니다.
• 다음에 해볼 토이 프로젝트에서 useValidation 코드를 좀 더 발전시킬 수 있을 것 같습니다.