[React] Study #7 | input 상태 관리하기 (useState, onChange)

input 태그의 상태를 관리해보자!

 

구현할 것은 아래의 사진처럼 input에 입력하는 값이 하단에 나타나게 하고, 초기화 버튼을 누르면 input 값이 비워지도록 하는것.

➰사용할 것

• useState : text 를 하단에 나타나게하고, 초기화를 하기 위해서
• onChange 이벤트 : 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있음!
  • e.target : 이벤트가 발생한 DOM인 input DOM을 가리킴
  • e.target.value : 현재 input에 입력한 값이 무엇인지 알 수 있음.

import React, {useState} from 'react'

function InputSample() {

    // text : 현재 상태, setText : text를 바꿔주는 Setter 함수
    // text의 초깃 값은 ''
    const [text, setText] = useState('');

    // 값이 바뀌었을 때, text 값을 업데이트
    const onChange = (e) =>{
        setText(e.target.value)
    }

    // text 값을 ''로 바뀌게!
        const onReset = () =>{
        setText('');
    }

    return (
        <div>

            {/* value={text} 해주는 것도 매우 중요 상태가 바뀌었을 때 input 값이 바뀌어야하니까! */}
            <input onChange={onChange} value={text}/>
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값: {text}</b>
            </div>
        </div>
    )
}

export default InputSample

 

 

 

---

Reference

https://react.vlpt.us/