리액트 커스텀 훅 사용하기 => useInput

리액트 훅으로 나만의 커스텀 함수를 만들 수 있다.

 

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

// mr.라는 값이 기본으로 들어가고,
// 인풋값 변화시 event.target이 콘솔에 찍히는 커스텀훅
const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);
  const onChange1 = event => {
    console.log(event.target);
  };
  return { value, onChange1 };
};

const App = () => {
  // useInput 이라는 커스텀훅을 name 변수에 넣고
  // input value = name의 value가 반환
  // input onChange시에는 name의 onChange1 함수가 반환되도록 사용한다
  const name = useInput("mr.");
  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>

      <input value={name.value} onChange={name.onChange1} />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

 

useInput 커스텀 훅 소스

- value 관련 : 인풋에 값을 입력하면 그 값이 setState로 설정된다

- validator 관련 : 10자 이하로 쓰고 @ 사용시 더이상 인풋이 안 된다

 

const useInput = (initValue, validator) => {
  const [value, setValue] = useState(initValue);
  const hookChange = event => {
    let willUpdate = true;
    if (typeof validator === "function") {
      willUpdate = validator(event.target.value);
    }
    if (willUpdate) {
      setValue(event.target.value);
    }
  };
  return [value, hookChange];
};

const App = () => {
  const maxLen = value => {
    if (value.length <= 10 && !value.includes("@")) {
      return value;
    }
  };
  const [name, onChangeName] = useInput("", maxLen);

  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>

      <input value={name} onChange={onChangeName} />
    </div>
  );
};