React Hooks: useState 예시

설명은 공식문서가 잘되어있고 그보다 직접 보는게 빨라서 코드만 정리해놓기

import React, { useState, useEffect } from 'react';

function App() {

  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const onSubmit = (e) => {
    e.preventDefault();
    alert("submit");
    console.log(name, age);
  }

  return (
    <div className="App">
      <form onSubmit={onSubmit}>
        <input type="text" value={name} onChange={({ target: { value } }) => setName(value)} />
        <input type="text" value={age} onChange={({ target: { value } }) => setAge(value)} />
        <button type="submit">Insert</button>
      </form>
    </div>
  );
}

export default App;

Vanilla JS였다면 document.querySelector();로 가져오고, 값 변환 후에, innerHTML을 해야했지만

useState를 이용하면 값 가져오는 것과 변환까지 한번에 되는 장점이 있다

계속 보면서 익숙해지자