[React] React Hook-1.1 useState를 활용한 useInput

useInput

- input 내용과 그에 따른 이벤트를 useState hooks를 통해 관리할 수 있다.

 

< useState를 활용한 useInput >

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    const {
      target: { value }
    } = event;
    // 위와 동일 : const { value } = event.target;
    let willUpdate = true;
    if (typeof validator === "function") 
      willUpdate = validator(value);
    if (willUpdate) 
      setValue(value);
    else alert("max length of name is 10");
  };
  return { value, onChange };
};

export default function App() {
  const maxLength = (value) => value.length < 10;
  const name = useInput("Mr.", maxLength);
  return (
    <div className="App">
      <h1>By Hooks</h1>
      <input placeholder="Name" {...name} />
      {/* 위와 동일 : <input placeholder="Name" value={name.value} onChange={name.onChange}/> */}
    </div>
  );
}

 

< useInput >

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const onChange = (event) => {
    const {
      target: { value }
    } = event;
    // 위와 동일 : const { value } = event.target;
    let willUpdate = true;
    if (typeof validator === "function") 
      willUpdate = validator(value);
    if (willUpdate) 
      setValue(value);
    else alert("max length of name is 10");
  };
  return { value, onChange };
};

 

 

1.

const [value, setValue] = useState(initialValue);

- useState를 initialValue로 초기화한다. 

    → value가 initialValue로 초기화된다.

 

2.

const onChange = (event) => {
    const {
      target: { value }
    } = event;
    // 위와 동일 : const { value } = event.target;

- event 발생 대상을 value 변수에 저장한다.

 

3.

    let willUpdate = true;
    if (typeof validator === "function") 
      willUpdate = validator(value);

- 인자로 전달받은 validator의 type이 function이 맞는 경우 validator를 통해 value를 검증한 값으로 willUpdate를 초기화 한다.

ex) validator 함수가 value의 길이가 10 이하인지 검사하는 함수일 때, 만약 value가 10보다 크다면 willUpdate는 false로 초기화 된다.

 

4.

    if (willUpdate) 
      setValue(value);
    else alert("max length of name is 10");
  };

- willUpdate가 true인 경우 setValue 함수를 이용하여 value값을 초기화 시킨다.

- willUpdate가 false인 경우 alert 함수를 사용하여 메시지를 보여준다.

 

5.

  return { value, onChange };

- value와 onChange 함수를 return 한다.

 

 

< App() >

export default function App() {
  const maxLength = (value) => value.length < 10;
  const name = useInput("Mr.", maxLength);
  return (
    <div className="App">
      <h1>By Hooks</h1>
      <input placeholder="Name" {...name} />
      {/* 위와 동일 : <input placeholder="Name" value={name.value} onChange={name.onChange}/> */}
    </div>
  );
}

- initialValue로 "Mr.", validator함수로 maxLength를 useInput의 인자로 전달한다.

- 초기값으로 Mr. 를 입력으로 준 상태에서 이름을 입력 받는다.(초기값을 지운 후 이름 입력 가능)

 

- validator를 활용하여 10글자 이상이 입력되면 alert가 발생한다.  

 

   → 이처럼  useState는 다른 function에서 이벤트를 처리할 수 있도록 해준다.