input 상태 관리하기

예제 코드

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 이 값이 비워지도록 구현을 해보겠습니다.

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

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

 

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

 

**요점 정리**

1.  e.terget 이 input 의 돔에 접근하여 값을 받아오는 역할을 한다.

2. onChange 함수는 이번트가 일어날때마다 실행된다.

3. 세터와 겟터 함수를 공부한게 이번 코드를 이해하는데 큰 도움이 된 것 같다.

4. onChange 함수로 이벤트를 체크하여 온체인지 함수가 실행된다 함수가 실행될때 입력된 값을 읽어와 세터 함수로 text 변수의 값을 변경시켜준다. 

5. 변경된 text 의 값을 인풋의 벨류 값으로 지정하면 값을 수정( 초기화 했을때 ) 초기화된 값이 인풋안에 내용에도 반영 된다. 내용이란 벨류값을 의미한다.