[React] input 상태 관리 방법

input 과 form를 이용한 이름, 전화번호 입력 만들기

---

0. 확장 프로그램 설치

Reactjs code snippets 확장팩이다

이 확장팩을 사용하면 자바스크립트 파일에서 자동으로 컴포넌트를 자동 생성해준다 (rcc, rsc 단축키 사용 가능)

rcc 단축키

: 클래스 형태로 만들어진 컴포넌트 자동 생성

rsc 단축키

: 함수형 형태로 만들어진 컴포넌트 자동 생성

---

1. 구조 만들기

(1) 파일 생성

src 디렉토리 안에 components 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다

(2) PhoneForm.js 내용

import React, { Component } from 'react';

class PhoneForm extends Component {

    state = {
        name : '',
        phone : '',
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name] : e.target.value
        });
    }
    render() {
        return (
            <form>
                <input name = 'name' placeholder='이름' onChange={this.handleChange} value={this.state.name}/>
                <input name = 'phone' placeholder='전화번호' onChange={this.handleChange} value={this.state.phone}/>
                <div>
                    {this.state.name} {this.state.phone}
                </div>
            </form>
        );
    }
}

export default PhoneForm;

(3) App.js 내용

import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';

class App extends Component {
  render() {
    return (
      <div>
        <PhoneForm />
      </div>
    );
  }
}

export default App;

---

2. 구조 설명하기

먼저 App.js에 PhoneForm.js를 연결해줍니다

이때 import 문을 다 적지 않고 아래처럼 태그를 달아주면 자동으로 import 문이 생성됩니다

<PhoneForm />

PhoneForm.js 에서 name과 phone의 상태를 정의해주기 위해 state를 사용합니다

state = {
    name : '',
    phone : '',
}

PhoneForm.js 에서 form 안에 input 태그를 생성해줍니다

<form>
      <input name = 'name' placeholder='이름' onChange={this.handleChange} value={this.state.name}/>
      <input name = 'phone' placeholder='전화번호' onChange={this.handleChange} value={this.state.phone}/>
      <div>
           {this.state.name} {this.state.phone}
      </div>
</form>

- name : 이름을 지정함 이것을 통하여 input이 여러 개일 경우 구분해줄 수 있음

- placeholder : 입력되기 전에 보여질 내용 ( 입력 후에는 사라짐 )

- onChange : input 의 텍스트 값이 바뀔때마다 발생하는 이벤트 ( name 값이 바뀌면 그에 따라서 value 값도 바꿔줌 )

- value : 값을 설정해줌 

- <div> 태그 안의 내용 : 이 부분을 통하여 실제 입력받는 부분이 나타남

- handleChange 함수 : onChange 이벤트가 발생하면 handleChange를 호출해 state의 값을 업데이트해주는 역할

                            : 변경 이벤트가 발생할 때 처리해주는 함수

 

설정해둔 handleChange 함수를 살펴보면 아래와 같다

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

이벤트 객체 e 를 통해서 앞으로 이벤트가 어떻게 처리될 것인지를 알 수 있다

 

이때 this.setState 안에는 name : e.target.value 대신에 [e.target.name] : e.target.value 를 사용하였다

코드가 단순할 경우에는  name : e.target.value를 사용해도 좋지만 그 반대일 경우에는 좋지 않다

 

이를 해결하기 위해 name 대신 [e.target.name] 를 사용하는 것이다

객체 안에서 key를 []로 감싸면, []안의 값이 가리키는 실제 값이 key 값이 된다

 

이게 무슨 말이냐면

name 또는 phone의 값은 [e.target.name] 과[e.target.phone] 를 통해서 조회할 수 있다

---

3. 결과

{this.state.name} 에서 ssddo를 입력받고

{this.state.phone} 에서 010 1234 5678 을 입력받았다