리액트 Custom Hook - input 입력 유효값 검사하기 (useInput)

리액트 전체 링크

 

다음과 같이 <input/> 이 있다.

 

리액트에서는 아래와 같이 input state를 관리한다.

import React, { useState } from "react";

const MyInput = () => {
  const [value, setValue] = useState("");

  return (
    <div style={{ margin: 5 }}>
      <input
        type="text"
        placeholder="입력"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />      
    </div>
  );
};

export default MyInput;

 

(빈 문자열을 포함하여) 숫자만 입력 가능하도록 코드를 수정해 보자.

import React, { useState } from "react";

const MyInput = () => {
  const [value, setValue] = useState("");
  
  const handleChange = (value) => {
    let isValidNumber = /^\d+$/.test(value);
    if(isValidNumber) setValue(value); 
  }

  return (
    <div style={{ margin: 5 }}>
      <input
        type="text"
        placeholder="숫자만 입력하세요..."
        value={value}
        onChange={(e) => handleChange(e.target.value)}
      />      
    </div>
  );
};

export default MyInput;

 

정상적으로 동작한다.

 

다른 입력 검사에 대해서도 처리할 수 있게 커스텀 훅 useInput을 만들어보자.

---

useInput

 

useInput 예시는 다음과 같다.

const useInput = (input) => {
  const [value, setValue] = useState(input);

  const onChange = (e) => {
    let newValue = e.target.value;
    setValue(newValue);
  }

  return { value, onChange };
}

 

이 값을 변수로 받아서 input 태그에 펼침 연산자로 사용하면 된다.

  const myInput = useInput("");

  ...

    <div style={{ margin: 5 }}>
      <input
        type="text"
        placeholder="입력"        
        {...myInput}
      />      
    </div>

 

전체 코드는 다음과 같다.

import React, { useState } from "react";

const useInput = (input) => {
  const [value, setValue] = useState(input);

  const onChange = (e) => {
    let newValue = e.target.value;
    setValue(newValue);
  }

  return { value, onChange };
}

const MyInput = () => {
  const myInput = useInput("");

  return (
    <div style={{ margin: 5 }}>
      <input
        type="text"
        placeholder="입력"        
        {...myInput}
      />      
    </div>
  );
};

export default MyInput;

---

validator

 

이제 처음 예시처럼 유효값을 검사해 보자.

validator를 추가하고, validator가 있는 경우, 유효값 검사를 통과하면 값을 변경한다.

또는 validator가 없는 경우도 값을 변경한다.

const useInput = (input, validator) => {
  const [value, setValue] = useState(input);

  const onChange = (e) => {
    let newValue = e.target.value;    
    if(validator && validator(newValue)) {
      setValue(newValue);
    } else if (!validator) {
      setValue(newValue);
    }
  }

  return { value, onChange };
}

 

다음과 같이 validator를 만들어서 useInput을 초기화 할 수 있다.

const numberValidator = (value) => {
  return /^\d+$/.test(value);
}

...

  const inputNumber = useInput("", numberValidator);

 

전체 코드는 다음과 같다.

import React, { useState } from "react";
const useInput = (input, validator) => {
  const [value, setValue] = useState(input);

  const onChange = (e) => {
    let newValue = e.target.value;    
    if(validator && validator(newValue)) {
      setValue(newValue);
    } else if (!validator) {
      setValue(newValue);
    }
  }

  return { value, onChange };
}

const numberValidator = (value) => {
  return /^\d+$/.test(value);
}

const MyInput = () => {
  const inputNumber = useInput("", numberValidator);

  return (
    <div style={{ margin: 5 }}>
      <input
        type="text"
        placeholder="숫자만 입력하세요..."        
        {...inputNumber}
      />       
    </div>
  );
};

export default MyInput;