input 상태 관리하기

이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보겠습니다.

우선, src e디렉터리에 lnputSample.js라는 파일을 생성하세요.

 

InputSample.js

import React from 'react';

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

export default InputSample;

그 다음에는, 이 컴포넌트를 App에서 렌더링하세요.

 

App.js

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

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

export default App;

input에 입력하는 값이하단에 나타나게 하고, 초기화 버튼을 누르면 input이 값이 비워지도록 구현을 해보겠습니다.

이번에도, useState를 사용합니다. 이번에는 input의 onChange라는 이벤트를 사용하는데요, 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용 할 수 있는데 이 객체의 e.tarhet은 이벤트가 발생한 DOM인 input DOM을 가르키게 됩니다. 이 DOM의 value 값, 즉 e.tathet.value를 조회하면 현재 input에 입력한 값이 무엇인지 알 수 있습니다.

이 값을 useState를 통해서 관리 해주면 됩니다.

한번 코드를 다음과 같이 수정해보세요.

 

InputSample.js

import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");

  const onChange = e => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
  };

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

export default InputSample;

input의 상태를 관리할 때에는 input 태그의 value값도 설정해주는 것이 중요합니다. 그렇게해야 상태가 바뀌었을 때 input의 내용도 업데이트 됩니다.