React 부트캠프 TIL 20

🖥️ 게시글 작성 페이지 유효성 검사

저번에 만든 작성 페이지는 입력값을 받고 그것을 데이터 베이스에 넣는 것까지 완성했다. 하지만 빈칸이 있어도 null 값으로 올라가기 때문에 이를 방지하기 위해 유효성 검사 부분을 추가했다.

유효성 검사 조건

• 테이블은 총 세개이고 정보 > 재료 > 내용 순서로 저장이 되고 있다.
• 초기에 user_id, recipe_id 는 0 으로 들어가고 있다.
• 저장 버튼을 누름과 동시에 빈칸이 있는지 확인하면 user id, recipe_id가 false라서 인풋을 모두 채워도 넘어가지 않는다
• 하나씩 실행하며 검사하면 정보는 저장되고 재료, 내용은 올라가지 않는 불상사가 발생 할 수 있음

이런저런 조건이 달려서 시도해봤지만 id값에서 말썽이라 원하는 대로 검사가 진행되지 않았다.
하지만.. 의외로 해결법은 간단했다.

// 초기값 설정
  const initRecipeInfo = {
    RECIPE_TITLE: "",
    RECIPE_DESCR: "",
    RECIPE_CTG: "",
    RECIPE_IMG: ""
  };

  const initIngInfo = [
    {
      ING_NAME: "",
      ING_VOL: ""
    },
    {
      ING_NAME: "",
      ING_VOL: ""
    }
  ];

  const initRecipeCont = [
    {
      RECIPE_STEP: "0",
      RECIPE_CONT: ""
    }
  ];

초기값에서 id를 모두 빼버렸다. 어차피 사용자가 입력하는 값만 채워진다면 저장은 진행되고 저장이 진행되면 user_id, recipe_id 모두 자연스럽게 값이 입력되기 때문에 굳이 초기에 값을 지정해줄 필요가 없었다.

유효성 검사 코드

 // 정보 비었는지 검사
    const validateInfoInput = (obj) => {
      const isTrue = Object.values(obj).some((value) => !value);
      return isTrue;
    };

    // 재료 비었는지 검사
    const validateIngInput = (arr) => {
      return arr.some((value) => value.ING_NAME.length === 0 || value.ING_VOL.length === 0);
    };

    // 순서 비었는지 검사
    const validateContInput = (arr) => {
      return arr.some((value) => value.RECIPE_STEP.length === 0 || value.RECIPE_CONT.length === 0);
    };

 if (validateInfoInput(recipeInfo) ||
 	validateIngInput(ingredientGroups) ||
 	validateContInput(recipeContGroups)) {
      Swal.fire({
        title: "빈칸 발견!",
        html: "입력 되지 않은 정보가 있습니다.<br/> 모든 칸을 채워 레시피를 완성해주세요 :)",
        icon: "error",
        customClass: {
          popup: "no-global-styles"
        }
      });
      return;
    }

some 메소드는 주어진 배열 안을 순회하며 조건을 충족하는 값이 하나라도 있는 경우 true를 반환한다.

정보 자체는 객체로 저장하고 있기 때문에 values를 통해 value 값으로 이루어진 배열을 만들고 이 배열을 some으로 돌며 데이터가 있는지 없는지 확인한다. 하나라도 false값이 있다면(빈 문자열 등) 그 즉시 true를 반환한다.

재료는 배열 안에 객체가 들어있는 형태이기 때문에 some을 통해 각 객체 안의 밸류값 길이를 재서 하나라도 false값이 있다면 그 즉시 true를 반환한다. 레시피 순서 또한 재료와 똑같은 형태이기 때문에 키 이름만 바꿔주었다.

그렇게 if 안에서 세가지 유효성 검사를 통해 하나라도 빈칸이 있는 true를 반환할 경우 alert을 띄우고 종료하도록 만들었다.