09. <Hook: useState> Rect에서 input 상태 관리하기

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 s26788761@naver.com 으로 문의주세요! 😀

이번에는 숫자 값이 아닌 input을 통해 입력받은 문자열의 상태를 관리.

input 태그에 문자열을 입력하면, 바로 아래 실시간으로 입력한 문자열이 표시되고, 초기화 버튼을 누르면 입력한 문자열이 삭제되는 예제.

이번엔, 문자열을 관리하니 useState 함수를 이렇게 설정하고

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

우리가 구현하고자 하는 기능은 input 태그에 입력되면 실시간으로 값이 바뀌어야 하는데, 해당 기능은 input 태그의 onChange 속성으로 처리할 수 있다.

onChange 함수를 만들어 주고

const onChange = (e) => {
  //여기서 e.target은 해당 이벤트 e가 발생한 DOM이고, 
  //그 값을 알고싶으면 e.target.value를 사용하면 된다.
  setText(e.target.value);
}

onChange 함수를 input 태그에 연결 시켜주면 된다.

//여기서 "value={text}"를 꼭 해야함!
//안하면 초기화 버튼 눌러도 input 태그 안 내용은 사라지지 않음!
<input onChange={onChange} value={text}/>

그리고 초기화 버튼은 onReset 함수로 구현할 수 있는데,

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

이렇게 구현하고, 버튼의 onClick 속성에 onReset 함수를 연동시키면

<button onClick={onReset}>Reset</button>

초기화 버튼을 누를때마다 input 태그 안의 내용과 div 태그안의 text가 초기화됨!!

+ 여기서 <input onChange={onChange} value={text}/> 이 문장에서 value={text} 설정을 안해주면 리셋 버튼 눌러도 input 태그는 변화 없음!

전체코드

import React, {useState} from 'react'; //지난 강의에서 배운 useState 함수 import

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

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

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

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

export default InputSample;