리액트 - input 상태관리하기

저번에는 useState를 이용해서 숫자의 값이 바뀌는 것을 제어해봤다.
만약에 텍스트의 값을 제어해야한다면 어떻게 할까?

InputSample.js라는 파일을 만들어서 텍스트의 입력을 받으면 입력한 텍스트가 아래에 출력되는 코드를 만들어보자.

import React from "react";

function InputSample() {
    const onChange = (e) => {
        console.log(e.target);
    }
    return (
        <div>
            <input onChange={onChange} />
            <button>초기화</button>

            <div>
                <p>값:</p>
                무슨무슨값
            </div>
        </div>
    )
}



export default InputSample;

다 만들어 진 것이 아니다. onChange를 이용해서 input에 입력된 텍스트 값을 그 아래에 있는 p에 출력하는 방식으로 만들 것이다. 그전에 const onChange = (e) => { console.log(e.target); }
이건 뭘까?
onChange는 변화가 일어났는지를 감지하는 것이다.
이때 오른쪽에 있는 e 는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. e.target은 이벤트가 발생한 DOM을 뜻하는데, 만약 input에 텍스트를 입력하면 콘솔 값으로 input이 도배가 될것이다.

글자를 누를 때마다 input이 출력되지만, 어떤 문자를 입력했는가는 나타나지 않는데, 만약 사용자가 입력한 데이터를 알고 싶으면 e.target.value라고 입력하면 된다.

이제 저번에 실습했던 useState()를 이용해서 input에 입력한 값을 "값:" 에 나타나게 해보자.

import React, {useState}from "react";

function InputSample() {
  const [text, setText] = useState("")
  const onChange = (e) => {
      setText(e.target.value);
  }

  return (
      <div>
          <input onChange={onChange} value={text} />
          <button>초기화</button>

          <div>
              <p>값:</p>
              {text}
          </div>
      </div>
  )
}


export default InputSample;

useState를 이용해서 input에 입력한 text의 값을 제어하는 함수를 만들었고 p태그 다음에 입력한 text가 나오게끔 {text}로 수정했다.

초기화를 누르면 텍스트가 초기화 되는 것도 구현하자.

 const onReset = () => {
      setText('')
 }

간단하다. 그저 setText로 공백으로 변경하면 된다.
이 함수를 초기화 버튼의 onClick에 지정하면 초기화가 된다.

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>
                <p>값:</p>
                {text}
            </div>
        </div>
    )
}



export default InputSample;

＃?

<input onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>

onchange 옆에 value={text}가 없어지면 왜 input 창에 있는 텍스트가 지워지지 않는거지?

input에 입력한 값은 위에 결과 코드를 잘 보면 알겠지만 e.target.value이다. 따라서 {text}와는 별개의 값이었다.
하지만 input에 onChange={onChange} value={text}라고 함으로써 value의 값이 {text}가 되었고, 이상태에서 초기화 버튼을 누르면 {text}값이 공백이 됨과 동시에 input 창의 text도 초기화가 되는 것이다.