[React] CustomHook 👉 useInput

https://nomadcoders.co 에서 강의를 듣고 정리한 내용 입니다.

1. useInput이란?

• input을 업데이트한다.

2. 기본적인 useInput

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

const useInput = (inititalValue) => {
	const[value, setValue] = useState(initialValue);
  	const onChange = (e) => {
    	
    	}
  	return { value, onChange }
};

const App = () => {
  	const name = useInput("Lee");
	return (
          <div className="App">
          	<h1> hello </h1>
      		// <input placeholder="Name" value={name.value} onChange={name.onChange}/>
		// <input placeholder="Name" value={...name}/>
		// 너무 길어지므로 모두 unpack 해줌
 		<input placeholder="Name {...name}>
          </div>
    ) 
}

3. 유효성 검증 추가

• hook과는 관계 없음!
• useInput을 hook 폴더에 분리했다

import React, { useState } from "react";

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

export default useInput;

4. 3번 사용

import React from "react";
// 분리 했으므로 import 해서 사용 
import useInput from "./Hooks/useInput";

const App = () => {
  const maxLen = value => value.length <= 10;
  // const restrictChar = value => !value.includes("@");

  const name = useInput("Lee", maxLen);

  return (
    <div className="app">
      <input placeholder="Name" {...name} />
    </div>
  ) 
}

export default App;

완강 후에 여유가 있으면 여러가지 검증을 확인할 수 있도록 해볼 것이다.