[React] input onChange 사용법 (onChange)사용 예시

class로 작성되어 있던 내용을 hooks로 다시 적어보았다. 

hooks로 간단하게 input onChange를 사용하는 예시는 아래의 글을 참조하기 바란다.

https://wonyoung2257.tistory.com/32

---

1. 기본 UI 준비

Example2.js

import React from "react";

export default class Example2 extends React.Component {
  state = {
    text: "텍스트",
  };
  render() {
    return (
      <div>
        <input />
        <h1>{this.state.text}</h1>
      </div>
    );
  }
}

Example2 컴포넌트를 위와 같이 작성해줍니다.

App.js

import React from "react";
import Example2 from "./Example2";

function App() {
  return (
    <div>
      <Example2 />
    </div>
  );
}

export default App;

 App.js에 Example2를 import 시킵니다.

 

npm start 하면 input 창 하나와 텍스트 창이 나옵니다.

실행 이미지

2. 함수 작성하기

import React from "react";

export default class Example2 extends React.Component {
  state = {
    text: "텍스트",
  };

  handleChange = (e) => {  // <- input값으로 text 변경 함수
    this.setState({
      text: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <input onChange={this.handleChange} /> // <-변경된 곳
        <h1>{this.state.text}</h1>
      </div>
    );
  }
}

 handleChange라는 함수를 만들어주고 input 태그의 onChange에 적어줍니다.

 *onChange는 input 안의 값이 변경될 때에 발생합니다.

실행시켜서 input에 글자를 적으면 '텍스트'라는 글자가 input 안의 글로 바뀌게 됩니다.

 

이렇게 하면 input으로 state값을 변경할 수 있게 되었습니다.

 

3. input이 여러 개 있을 때 방법

프로그램을 만들다보면 input이 여러 개 사용되는 경우가 많습니다. 

좋은 예시로 회원가입폼에는 많은 input이 사용됩니다.

 

이럴 때는 어떻게 해야 할까요?

 

위의 예시대로 input을 3개 만들어 보겠습니다.

import React from "react";

export default class Example2 extends React.Component {
  state = {
    text: "텍스트",
    text2: "텍스트2",
    text3: "텍스트3",
  };

  handleChange = (e) => {
    this.setState({
      text: e.target.value,
    });
  };

  handleChange2 = (e) => {
    this.setState({
      text2: e.target.value,
    });
  };

  handleChange3 = (e) => {
    this.setState({
      text3: e.target.value,
    });
  };

  render() {
    return (
      <div>
        <input onChange={this.handleChange} />
        <h3>{this.state.text}</h3>
        <input onChange={this.handleChange2} />
        <h3>{this.state.text2}</h3>
        <input onChange={this.handleChange3} />
        <h3>{this.state.text3}</h3>
      </div>
    );
  }
}

 input 3개만 추가했는데 코드가 많이 길어졌습니다.

input 수만큼 함수를 만들어 주면 많이 비효율적입니다. 

 

효율적으로 변경해보겠습니다.

import React from "react";

export default class Example2 extends React.Component {
  state = {
    text: "텍스트",
    text2: "텍스트2",
    text3: "텍스트3",
  };

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value, // <- 변경 후
    });
  };

  render() {
    return (
      <div>
        <input name="text" onChange={this.handleChange} /> // name 추가
        <h3>{this.state.text}</h3>
        <input name="text2" onChange={this.handleChange} />
        <h3>{this.state.text2}</h3>
        <input name="text3" onChange={this.handleChange} />
        <h3>{this.state.text3}</h3>
      </div>
    );
  }
}

 많이 간략하게 변했죠?

[e.target.name]의 값으로 input 태그의 name 값이 들어갑니다.

그래서 그에 맞는 state값이 변경됩니다.

하나의 handleChange 함수로 여러 input을 제어할 수 있게 되었습니다.

 

회원가입, 로그인 등 기본적인 기능에서 많이 사용되니 꼭 알아두세요!