input 상태 관리하기

• 변경되는 값은 useState로 관리
• input의 onChange를 사용하면 이벤트 객체 e를 파라미터로 받아올 수 있다.
• 이 객체의 e.target은 이벤크가 발생한 DOM을 가리킨다.
• e.target.value를 조회하면 현재 input의 value값을 알 수 있다.
• input의 상태를 관리할 때는 input태그의 value값도 설정

InputSample.js

import React,{ useState } from 'react';

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

    const onChange = (e) => {
        setText(e.target.value); 
        //(e)에 event가 발생한 DOM에 대한 정보를 가지고 있다.
    }

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

    return (
        <div>
            <input onChange={onChange} value={text}/>
            {/* value값을 설정해줘야 나중에 초기화버튼을 눌러서 input을 바꿨을 때도 input에 있는 값이 비워지게 된다.*/}
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값 : </b>
                {text}
            </div>
        </div>
    );
}

export default InputSample;

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C