[관광데이터 공모전] React 유효성 검사 방법

React로 프로젝트를 진행하다보면 유효성 검사해야할 필요가 있는날이 있다.

나같은 경우는 데이터를 백엔드로 보낼때 데이터들이 올바르게 입력된 상태에서 보냈어야 했기에 유효성 검사가 필수적으로 필요 했다.

따라서 이번에는 데이터들이 올바르게 입력이 되었는지 확인하기 위한 유효성 검사하는 방법에 대해서 글을 써보려고

한다.

.

.

.

.

.

.

 

시작!!!

 

 

일단 유효성 검사를 해보기전에 우리가 먼저 알아야 할것은 React에서 useState이다

 

 

useState란?

useState는 React의 Hook 중 하나로서 변수의 상태값을 관리 하는것이다.

 

여기서 React의 Hook이 뭐야 하는사람이 있을텐데 

React의 Hook은  리액트 v16.8에 새로 도입된 기능으로써 기존에 클래스형 컴포넌트를 함수형 컴포넌트로 바꾼 기술들이라고 보면 된다.

 

그럼 이제 useState가 뭔지 알았으니 어떻게 사용하는지 방법부터 알아보자.

 

 

 

 

1. useState import 하기

 

useState를 사용하려면 useState를 import 해줘야 한다.

 

 

import React,{useState} from 'react';

 

 

이렇게 import 해주면 된다.

그럼 이제 import 한  useState를 가지고 변수에 적용을 시켜보자.

 

 

 

 

 

2. 변수에 useState 적용시키기

 

변수에 적용 시키는 방법은 아래와 같다.

 

const [name,setName] = useState();

 

위 코드를 설명하자면 name은 변수명이고 setName은 추후에 name 값을 변경시킬때 사용하는 함수명 같은 것이다.

그리고 useState() 안에 인자로 값을 넣어주면 해당 값이 초기값으로 들어가게 된다.

 

그럼 이제 본격적으로 유효성 검사를 만들어보자.

 

유효성 검사를 설명하기에 앞서 일단 내코드부터 보여주겠다.

 

import React,{useState} from 'react';

function One() {
    const [name,setName] = useState();
    const [checkName,setCheckName] = useState(false);

    const nameChange = (e) => {
        const temp = e.target.value;
        if(temp === ""){
            setCheckName(false);
        }else{
            setCheckName(true);
        }
        setName(temp);
    }

    const send = () => {
        alert("sending "+name);
    }

    return (
        <div>
            <h1>This is One</h1>
            <input placeholder='name' onChange={nameChange}></input>
            <button disabled={!checkName} onClick={send}>send</button>
        </div>
    );
}

export default One;

 

 

 

3. 유효성 체크하는 변수 만들기

 

나같은 경우는 일단 값이 들어있는지 안들어있는지 확인을 하기 위해 변수를 하나 만들어주었다.

 

const [checkName,setCheckName] = useState(false);

 

해당 값은 input 값에 값이 들어있는지 확인하고 값이 있으면 true 없으면 false를 입력하게 했다.

 

그럼 이제 input 값에 값이 들어갔을때의 이벤트를 추가해보자.

 

 

 

 

 

 

 

4. 값 입력 이벤트에 유효성 검사하기.

 

 

input에 값이 바뀔때마다 그 이벤트를 체크 하기 위해서  nameChange라는 함수를 만들었다.

 

 

    const nameChange = (e) => {
        const temp = e.target.value;
        if(temp === ""){
            setCheckName(false);
        }else{
            setCheckName(true);
        }
        setName(temp);
    }

 

여기서는 입력받은 값이 아무것도 없다면 false를 입력시키고 있다면 true를 입력시킨다.

 

그럼 이제 checkName값으로 입력값이 없으면 button을 비활성화 시키는걸 만들어보자.

 

 

 

 

 

 

5. 버튼 비활성화 하기

 

아무런 값 혹은 조건에 맞지 않다면 제출을 하지 못하게 버튼을 막아야 한다.

나같은 경우에는 간단하게 일단 값이 없는지만 체크했다.

 

버튼을 비활성화 하려면 disabled 를 사용해주면 된다.

disabled는 값이 true 일때만 비활성화 되는데 나는 초기값을 false로 줬으니 앞에 not 즉 ' ! ' 를 붙여주어 

버튼을 비활성화 했다.

 

<button disabled={!checkName} onClick={send}>send</button>

 

 

따라서 결과는 아래와 같이 보인다.

 

 

name 값이 있을때와 없을때

 

 

그럼이제 값을 체크하는 유효성 검사에 대해 알아봤으니 이제 서버로 데이터를 넘기는 방법에 대해서 

다음 포스트에서 설명을 하겠다.

.

.

.

.

.

.

.

.

.

.

.

.

.

 

To be continued