# Input

## Input Event

{% embed url="<https://ko.reactjs.org/docs/events.html#form-events>" %}

Input Event는 입력 시 발생하는 이벤트이다. 다음과 같은 종류가 존재한다.

* onChange
* onInput
* onSelect

{% hint style="info" %}
React에서는 Input Event와 Change Event가 동일하게 처리된다.

React는 많은 사람들이 쓰지만  웹 표준은 아니며, 이 부분에 대해서는 명확한 문서를 찾을 수 없었다.

<https://github.com/facebook/react/issues/3964>

문서에서는 onChange로 입력을 처리하도록 코드를 작성한다.
{% endhint %}

## onChange

### 예제 - 입력한 글자 수를 알려주는 페이지

```jsx
class MainComponent extends React.Component {
    state = {
        text : "",
    };
    setText = (e)=>{
        this.setState({
            text:e.target.value
        });
    };
    render(){
        const {text} = this.state;
        return (
            <>
                <input type="text" onChange={this.setText}/>
                <hr/>
                <span>입력 글자 수 : {text.length}</span>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/QWxOdjg>" %}

### 예제 - 회원 정보 입력

```jsx
class MainComponent extends React.Component {
    state = {
        memberId:"",
        memberNick:"",
        memberPhone:"",
    };
    setValue = (e)=>{
        this.setState({
            [e.target.name]:e.target.value
        });
    };
    render(){
        const {memberId, memberNick, memberPhone} = this.state;
        return (
            <>
                아이디 : <input type="text" name="memberId" onInput={this.setValue}/><br/>
                닉네임 : <input type="text" name="memberNick" onInput={this.setValue}/><br/>
                전화번호 : <input type="text" name="memberPhone" onInput={this.setValue}/><br/>
                <hr/>
                <div>입력된 아이디 : {memberId}</div>
                <div>입력된 닉네임 : {memberNick}</div>
                <div>입력된 전화번호 : {memberPhone}</div>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent/>
);
```

{% embed url="<https://codepen.io/hiphop5782/pen/gOKXgPP>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/reactjs/cdn/component/class-component/event/input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.