React 시작하기 5. Input State

 

 

App.js

import React from 'react';
import InputSample from './inputSample';

function App() {
  return (
    <div>
       <InputSample />
    </div>
  );
}

export default App;

 

InputSample.js

import React, { useState } from "react";

function InputSample() {
  // useState => text/SetText
  const [text, SetText] = useState('');

  // 이벤트(e)로 해당 target의 value 불러오기
  const onChange = (e) => {
    SetText(e.target.value);
  };

  // Setter 함수로 값 초기화
  const onReset = () => {
    SetText('');
  };

  return (
    <div>
      {/* onChange로 text 변경, value를 text로 지정 */}
      <input onChange={onChange} value={text} />
      {/* onClick으로 Reset 함수 호출 */}
      <button onClick={onReset}>Reset</button>
      <div>
        <b>값 : {text}</b>
      </div>
    </div>
  );
}

export default InputSample;