React - useState

Hook이란?

가장 기본적인 hook

함수형 컴포넌트에서 가변적인 상태 관리

useState

react의 state machine에 연결하는 기본적인 방법

const [상태, 상태 설정 함수] = useState(상태 초기값);

import React, { useState } from 'react';

const Counter = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

useInput

input을 업데이트

useState를 이용한 커스텀 hook

const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);
  const onChange = event => {
	  console.log(event.target);  // 변화할 때 마다 target이 console에 출력
  };
  return { value, onChange };  // value, onChange return
};

const App = () => {
  const name = useInput("Mr.");
  return (
    <div className = "App">
      // <input placeholder="Name" value = {name.value} onChange = {name.onChange} />
      <input placeholder="Name" {...name} />
    </div>
  );
};

validator를 통한 검증 기능 추가

parameter validator에 들어오는 argument의 타입과 값을 검증할 수 있다.

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

// validator 검증
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 }; // value, onChange return
};

const App = () => {
  // const maxLen = value => value.length < 10;
  const maxLen = value => value.includes("@");
  const name = useInput("Mr.", maxLen);
  return (
    <div className="App">
      <h1>Hello</h1>
      {/* <input placeholder="Name" value = {name.value} onChange = {name.onChange} /> */}
      <input placeholder="Name" {...name} />
    </div>
  );
}

export default App;