(React) input 상태 관리하기

해당 글은 벨로퍼트의 모던 자바스크립트에서 발췌했습니다.
원문보기

input 상태 관리하기

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

InputSample.js

import React from 'react';

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

export default InputSample;

App.js

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

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

export default App;

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

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

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

InputSample.js

import React, { useState } from 'react';

function InputSample() {
  const [text, setText] = useState('');
  
  const onChage = (e) => {
    setText(e.target.value);
  };
  
  const onReset = () => {
    setText('');
  };
  
  return (
    <div>
      <input onChange={onChage} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b> 값 : {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

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