input 상태 관리

import React from 'react';

function Input() {
  return (
    <div>
      <input />
      <button>초기화</button>
      <div>
        <b>값: </b>
      </div>
    </div>
  );
}

export default Input;

import React from 'react';
import Input from './Inputs';

function App() {
  return (
    <Input />
  );
}

export default App;

이 상태에서 input 에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input의 값이 비워지도록 구현을 해본다면 어떨까

import React, { useState } from 'react';

function Input() {
  const [text, setText] = useState('');

  const onChange = (e) => {
    setText(e.target.value);
    /* e.target = 이벤트가 발생한 DOM 인 input DOM을 뜻함
    	즉 e.target.value는 input DOM의 입력값을 조회한다
        라는 말이된다.
    */
  };

  const onReset = () => {
    setText('');	
    // Text에 빈값을 넣어서 비워주도록 하자
  };

  return (
    <div>
      <input onChange={onChange} value={text}  />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default Input;

문제가 있다! input이 여러개 일땐 어떻게 관리할까
다음편에 계속