[React] input 상태 관리하기(useState / onChange 이용)

💩이번 시간에는 리액트에서 input 상태를 어떻게 관리하는지 알아보겠습니다.

 

지난시간에 우리는 button을 이용해서 숫자의 상태를 관리하는 법을 배웠는데, 이렇게 버튼 말고 input은 어떻게 관리할까?

 

import React from "react";

function InputSample(){

    return (

        <div>

            <input />

            <button>초기화</button>

            <div>

                <b>값: </b>

            </div>

        </div>

    )

}

export default InputSample;

✅ InputSample.js

InputSample 컴포넌트를 만든다. 그리고 늘 그랬듯 App 컴포넌트에서 InputSample 컴포넌트를 렌더링한다.

 

이전에 버튼에서는 onClick이라는 이벤트를 관리했었는데, input에서는 onChange라는 이벤트를 관리해보도록 하겠다.

 

function InputSample(){

    const onChange = (event) => {

        console.log(event.target);

    }

    return (

        <div>

            <input onChange={onChange}/>

            <button>초기화</button>

            <div>

                <b>값: </b>

            </div>

        </div>

    )

}

이렇게 작성하면 우리가 input안에 값을 적을때마다 event.target인 input이 콘솔에 나타나는 것을 볼 수가 있다. 그렇다면 input안에 작성되는 값은 어떻게 알 수 있을까? event.target.value에 나타난다.

 

function InputSample(){

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

    const onChange = (event) => {

        setText(event.target.value);

    }

    return (

        <div>

            <input onChange={onChange} value={text}/>

            <button>초기화</button>

            <div>

                <b>값: {text}</b>

            </div>

        </div>

    )

}

이렇게 작성하면 input에 무엇을 입력하던 값에 바로 보이는 것을 확인할 수가 있다.

💩 초기화 버튼을 누르면 값이 초기화되도록 만들기

function InputSample(){

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

    const onChange = (event) => {

        setText(event.target.value);

    };

    const handleReset = () => {

        setText('');

    };

    return (

        <div>

            <input onChange={onChange} value={text}/>

            <button onClick={handleReset}>초기화</button>

            <div>

                <b>값: {text}</b>

            </div>

        </div>

    )

}

이렇게 handleReset이라는 함수를 만들어서 초기화시키도록 할 수가 있는데,

이 때 input에 value={text}를 주지 않았다면, 초기화 버튼을 누르면 input안의 텍스트는 초기화되지 않고 밑에 값만 지워지는 것을 확인할 수가 있다.