[React] React.js 강좌 9. Input 상태 관리하기

React Input 상태 관리하기

 

 

 

1. Form을 사용한 컴포넌트 만들기

먼저 input을 다루기 위해 Form DOM을 사용한 컴포넌트를 만들어봅니다.

 

import React, {Component } from 'react';

export default class FormTest extends Component{
    state ={
        id: '',
        name: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    render(){
        return(
            <form>
                <input placeholder="아이디"
                value={this.state.id}
                onChange={this.handleChange}
                name="id"
                />
                <input placeholder="이름"
                value={this.state.name}
                onChange={this.handleChange}
                name="name"
                />
                <div>{this.state.id} {this.state.name}</div>
            </form>
        )
    }
}

 

여기서 handleChange의 파라미터 e는 event의 줄임말로 input에서 입력한 값의 변화가 있을 때의 핸들러 이벤트를 의미합니다.

입력한 값에 변화가 생기면 setState를 통해 렌더링을 할 수 있도록 하는데 input이 여러개니 e.target.name에 e.target.value를 초기화 하도록 하는 것이지요.

 

 

 

이런식으로 handleChange 함수를 작성하게 되면 함수를 여러 개 만들 필요 없이 여러 개의 input을 하나의 함수로 사용하게 하여 코드의 재사용성을 줄일 수 있습니다.

 

 

 

 

2. 부모 컴포넌트에게 정보 전달하기

이제 state 안에 있는 값들을 부모 컴포넌트에게 전달해주어야 하는데, 이러한 상황에서는 부모 컴포넌트에서 메소드를 만들고, 이 메소드를 자식에게 전달한 다음, 자식 내부에서 호출하는 방식을 사용합니다.

 

 

먼저 App 컴포넌트 내부에서 handleCreate라는 메소드를 만듭니다. 만든 메소드를 자식 컴포넌트인 PhoneForm에게 onCreate에 props로 전달해줍니다.

그러면 자식 컴포넌트는 props로 전달한 함수인 onCreate가 호출되어서 data 값이 App.js로 들어가게 되는 것입니다.

 

import React, { Component } from "react";
import FormTest from "./FormTest";

export default class LoginPage extends Component {
    index = 0; // id는 렌더링 되는 값이 아니기 때문에 state 값 안에 넣어줄 필요 없음

  state = {
    information: []
  };
  handleCreate = data => {
    const { information } = this.state; // 비구조 할당
    // const information = this.state.information // 비구조 할당을 쓰지 않으면 이렇게 쓸수 있습니다.

    // 불변성 유지. 기존것 기반으로 값 주입. concat
    this.setState({
      information: information.concat({
        ...data,
        index: this.index++

        /* 또는 다른 방법1: 
        name: data.name,
        phone: data.phone,
        id: this.id++

      방법2:
        .concat(Object.assign( {}, data, {
          id: this.id++
        }))
        
      */
      })
      // 비구조할당 안쓰면 this.state.information.concat(data)가 된다.
    });
  };

  render() {
    return (
      <div>
        <FormTest onCreate={this.handleCreate} />
        {JSON.stringify(this.state.information)}
      </div>
    );
  }
}

import React, { Component } from 'react';

export default class FormTest extends Component {
    state = {
        id: '',
        name: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleSumbit = e => {
        e.preventDefault();
        this.props.onCreate({
            id: this.state.id,
            name: this.state.name
        });
        this.setState({
            id: "",
            name: ""
        });
    };


    render() {
        return (
            <form onSubmit={this.handleSumbit}>
                <input placeholder="아이디"
                    value={this.state.id}
                    onChange={this.handleChange}
                    name="id"
                />
                <input placeholder="이름"
                    value={this.state.name}
                    onChange={this.handleChange}
                    name="name"
                />
                <button type="submit">submit</button>
            </form>
        )
    }
}

 

여기선 LoginPage가 부모 컴포넌트고, FormTest가 자식 컴포넌트입니다.

 

앞서 설명했다 싶이, LoginPage의 handleCreate 메소드를 자식으로 넘겨주는데, 자식 컴포넌트인 FormTest에서는 submit이라는 버튼을 누르게 되면 handleSubmit이라는 메소드가 호출되는 구조입니다.

 

이 메소드에서 e.preventDefault()는 action, 페이지 이동을 방지한다는 의미입니다.

 

그 바로 아래 this.props.onCreate에 값을 넣어주는 것을 확인할 수 있는데, form DOM에서 사용자의 아이디와 이름을 넣었던 값이 props를 통해 부모로 넘어가게 되는 구조입니다.

 

부모 컴포넌트인 LoginPage에서 handleCreate 이벤트가 발생되면서 현재 state의 information이 setState를 통해 다시 렌더링 됩니다.

 

마지막으로 JSON.stringify를 통해 this.state.information 값이 json형태로 출력이 됩니다.

 

 

복잡하고 어려운 부분인데, props와 state, handleCreate 호출 순서를 잘 따져가면서 확인해보셔야합니다!