[React] 입력 데이터 저장하기 (useState, onChange)

useState

입력 데이터를 저장하기 위해서는 먼저 useState라는 리액트의 기본 개념을 알고 있어야 한다.

useState는 이전 글에서 다루기도 했고, 구글링을 통해 쉽게 알 수 있는 개념이기 때문에 자세한 설명은 하지 않겠다. 그냥 간단하게 정의하자면, 지금 이 글의 제목이 '입력 데이터 저장하기'인데, useState는 거기서 '입력 데이터'를 맡고 있다고 보면 된다. 즉, 입력 데이터를 useState를 이용하여 상태 값으로 저장한다는 뜻이다.

 

onChange

입력 데이터라는 것은 '입력' 이라는 이벤트가 들어간 데이터이다. 즉, 이벤트를 수행했을 때 업데이트된 데이터의 값이라는 뜻이다. 이를 도와주는 게 바로 onChange 이벤트이다. 

onChange는 데이터의 값이 변경되는 것을 감지하는 역할을 한다. 여기서는 입력 이벤트를 감지해주는 역할인 셈이다. 

const reactSample = () => {

    const sayHi = () => {
        console.log("Hi!") // input에 입력할 때마다 console에 Hi! 출력
    }
    
    return (
        <div>
            <input onChange={sayHi} /> 
        </div>
    )
    
}

간단한 onChange 이벤트 예시이다. input 태그에 onChange={sayHi}를 넣어줌으로써 무언가를 입력할 때마다 sayHi()가 실행되도록 하였다. (onChange가 입력 감지 => sayHi() 실행)

 

import {useState} from 'react';

const reactSample = () => {

    const [data, setData] = useState('');

    const dataHandler = () => {
        setData(e.target.value);
    }
    
    return (
        <div>
            <input value={data} onChange={dataHandler} /> 
        </div>
    )
    
}

이번엔 useState와 함께 사용해봤다. 상태값(data)을 input의 value로 주었고, onChange 이벤트가 있을 때마다 setData를 통해 data의 값을 e.target.value로 업데이트하도록 하였다. 쉽게 말하면, input의 value 값을 상태값(data)로 저장한다는 뜻이다. 이를 통해서 State에 입력 데이터를 저장할 수 있다.

 

1. onChange로 데이터를 받아와서 setState(상태 변경 함수)를 통해 state(상태값)에 저장한다.
2. input의 입력값 === e.target.value