inputText 기본 컴포넌트

 

위와 같이 인풋에 입력한 값이 화면에 실시간으로 반영되고 초기화버튼도 만들려면 어떻게 해야할까?

다음과 같은 컴포넌트를 만들면 된다.

 

---

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

        </div>

    )

}

 

export default InputSample;

---

1. useState를 import한다.

import React, {useState} from 'react';

 

2. 초기값을 '' 로하는 text 변수와 setter을 만든다.

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

 

3. input의 변화에 따라 text 값을 변경하는 함수를 만든다.

const onChange = (e) =>{ setText(e.target.value);  }

 

4. 초기화 버튼을 누르면 text를 ''로 변경하는 함수를 만든다.

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

 

5. UI를 만든다.

5.1. div로 감싼다.

5.2 input 태그를 만든다. 이 때 변경에 될 때마다 동작할 함수를 연결한다. 주의할 것은 value={text}를 써주어야 초기화 버튼에 반응한다. 그 이유는 onReset함수와 연결되는 부분이 {text} 이기 때문이다.

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

 

5.3 버튼을 만들고 클릭되었을 때 동작할 함수를 연결한다.

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

 

5.4 text 변수를 보여준다.

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