[ React ] 리액트 이벤트 핸들링 기초 - input 입력

React 이벤트 핸들링 기초 사용법

리액트에서 onClick 과 같은 이벤트를 작성하는 방법이 약간 다르고,  기초 적이지만 중요한 부분을 정리를 해보았습니다. 

1. 이벤트의 이름은 'onclick' 이 아닌 'onClick' 으로 (카멜케이스) 작성.

2. 이벤트는 함수의 형태 값을 전달한다. 

3. DOM 요소에서만 이벤트 설정 가능. 

다음 3가지는 이론 적인 것이고 이제 실제로 예제를 만들어서 3가지에 대해서 정리를 해보려고 합니다. 

create-react-app으로 프로젝트를 만듭니다.

$ create-react-app dh-event-input

설치가 완료 되었으면, 프로젝트 폴더 이동

$ cd dh-event-input

프로젝트 이동후, 실행.

$ yarn start

화면이 나오면 성공입니다.

이제 App.js를 변경해 보겠습니다. 

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  /* id password state값 으로 정의 */
  /* input value 변경 ==> onChange */
  /* 로그인 버튼 클릭 ==> onClick */
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <input type="text" placeholder="아이디" />
          <input type="password" placeholder="비밀번호" />
          <button>로그인</button>
        </header>
      </div>
    );
  }
}
export default App;

첫번째로 App.js에서 input 및 button을 적어두었습니다.

다음으로 state를 정의해두고 해주고 onCreate 이벤트를 사용해 보겠습니다. 

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  /* id password state값 으로 정의 */
  state = {
    id: '',
    password: ''
  }
  /* input value 변경 ==> onChange */
  appChange = (e) => {
    this.setState({
      id: e.target.value
    });
  }
  /* 로그인 버튼 클릭 ==> onClick */
  appClick = () => {
    console.log(`id는:${this.state.id}`);
  }
  render() {
    const { id, password } = this.state;
    const { appChange, appClick } = this;
    return (
      <div className="App">
        <header className="App-header">
          <input type="text" placeholder="아이디" value={id} onChange={appChange} />
          <input type="password" placeholder="비밀번호" />
          <button onClick={appClick}>로그인</button>
        </header>
      </div>
    );
  }
}
export default App;

이렇게 기본적으로 input태그를 활용하여 onCreate와 onClick 이벤트를 사용해 보았는데, 한가지 문제가 있습니다. 

1개의 input 을 사용할때는 문제가 없지만, 2개 이상의 input 태그를 사용할때 매번 이벤트 함수를 만드는데 버거움이 있습니다.  

이러한 경우 input 태그의 다른 속성을 활용하여 key값도 받아오도록 하면됩니다. 저는, input의 name 속성을 활용해 보겠습니다. 

<input type="text" name="id" placeholder="아이디" value={id} onChange={appChange} />
<input type="password" name="password" placeholder="비밀번호" value={password} onChange={appChange} />

다음으로 this.setState 할때 , key 값을 [] 로 감싸주고 , target.name값을 받아 옵니다.  

appChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

마지막으로 input focus에서 Enter키를 누를때 이벤트 onKeyPress 를 만들어 주시면 됩니다.

import React, { Component } from 'react';
import './App.css';
class App extends Component {
  /* id password state값 으로 정의 */
  state = {
    id: '',
    password: ''
  }
  /* input value 변경 ==> onChange */
  appChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  /* 로그인 버튼 클릭 ==> onClick */
  appClick = () => {
    console.log(`id는 : ${this.state.id}\npw는 : ${this.state.password}`);
  }
  appKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.appClick();
    }
  }
  render() {
    const { id, password } = this.state;
    const { appChange, appClick, appKeyPress } = this;
    return (
      <div className="App">
        <header className="App-header">
          <input type="text" name="id" placeholder="아이디" value={id} onChange={appChange} />
          <input type="password"
            name="password"
            placeholder="비밀번호"
            value={password}
            onChange={appChange}
            onKeyPress={appKeyPress}
          />
          <button onClick={appClick}>로그인</button>
        </header>
      </div>
    );
  }
}
export default App;

sns신고

저작자표시