[ React-Tutorial-06 ] input 상태관리

지금까지 배웠던 것을 요약해보자면

• Component 만들기
• props와 state
• LifeCycle API

기존 에 배웠던 지식을 통하여 input 상태를 관리하는 방법과 배열을 다루는 방법을 알아보자.

01. 프로젝트 생성

기존에 만들었던 프로젝트는 그대로 두고, 새로운 프로젝트를 만들어보자

create-react-app phone-book

그리고,  cd phone-book 을 통해 해당 디렉토리를 열고,  yarn start 를 통해서 개발서버를 시작한다.

02. 첫번째 컴포넌트, PhoneForm 만들기

먼저 만들 컴포넌트는 PhoneForm 이다. 이 컴포넌트에서는 사용자에게서 이름과 전화번호를 입력 받을 것이다.

아직 input 컴포넌트의 입력을 state에 담는 방법에 대해서는 알아보지 않았으니 한번알아보자!

// file: src/components/PhoneForm.js
import React, { Component } from 'react';

class PhoneForm extends Component {
  state = {
    name: ''
  }
  handleChange = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  render() {
    return (
      <form>
        <input placeholder="이름" value="{this.state.name}" onchange="{this.handleChange}">
        <div>{this.state.name}</div>
      </form>
    );
  }
}

export default PhoneForm;

onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있다.

해당 값을 state의 name부분으로 설정해보자!

render 부분에서 input을 렌더링 할 때에는 value 값과 onChange 값을 넣어주었다. onChange는 input의 텍스트 값이 바뀔때마다 발생하는 이벤트 이다.

여기에 우리가 만들어둔 handleChange를 설정하였다. 그리고 나중에 우리가 데이터를 등록하고 나면 이 name값을 공백으로 초기화 해줄 것인데,

그렇게 초기화 되었을 때 input에서도 반영이 되도록 value를 설정해주었다.

그리고 하단에는 name 값이 잘 바뀌고 있는지 확인할 수 있도록 값을 렌더링해주었다.

자~ 그럼 이 컴포넌트를 App에서 inport 하여 사용해보자!

// file: src/App.js
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';


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

export default App;

결과물이 제대로 나오는지 확인해보고, 제대로 나온다면 input 값을 한번 수정해보자. 하단에 정상적으로 출력이된다면,

아래 코드를 입력하여 input을 하나 더 추가해서 전화번호부도 만들어 보자

// file: src/components/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 placeholder="이름" value="{this.state.name}" onchange="{this.handleChange}" name="name" />
        <input placeholder="전화번호" value="{this.state.phone}" onchange="{this.handleChange}" name="phone" />
        <div>{this.state.name} {this.state.phone}</div>
      </form>
    );
  }
}

export default PhoneForm;

아마 또 다른 이벤트 핸들러 함수를 만들면 되지 않을까? 라고 생각할 수 있다. 그 방법도 나쁘지는 않지만 더 나은 방법이 있다.

바로 input의 name 속성을 사용하는 것인데, render 부분을 보면, 각 input에  name 값을 부여해준다.

이를 통하여 우리는 각 input을 구분할 수 있고, 이  name 값은,  event.tartget.name 을 통해서 조회가 가능하다.

결과물을 확인해보면, 두 input이 제대로 작동하는 것을 볼 수 있다.

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

이제 state 안에 있는 값들을 부모 컴포넌트에게 전달해줄 차례이다. 이러한 상황에는, 부모 컴포넌트에서 메소드를 만들고, 

이 메소드를 자식에게 전달한 다음, 자식 내부에서 호출하는 방식을 사용한다.

우리는 App 에서 handleCreate라는 메소드를 만들고, 이를 PhoneForm 한테 전달할 것이다. 그리고, 

PhoneForm 쪽에서 버튼을 만들어서 submit이 발생하면, props로 받은 함수를 호출하여 App에서 파라미터로 받은 값을 사용 할 수 있도록 해보자.

우선  App.js 를 아래와 같이 수정해보자.

// file: src/App.js
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';

class App extends Component {
  handleCreate = (data) => {
    console.log(data);
  }
  render() {
    return (
      <div>
        <PhoneForm
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}

export default App;

그 다음엔,  PhoneForm.js 에서 버튼과 onSubmit 이벤트를 설정한다.

// file: src/components/PhoneForm.js
import React, { Component } from 'react';

class PhoneForm extends Component {
  state = {
    name: '',
    phone: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  handleSubmit = (e) => {
    // 페이지 리로딩 방지
    e.preventDefault();
    // 상태값을 onCreate 를 통하여 부모에게 전달
    this.props.onCreate(this.state);
    // 상태 초기화
    this.setState({
      name: '',
      phone: ''
    })
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          placeholder="이름"
          value={this.state.name}
          onChange={this.handleChange}
          name="name"
        />
        <input
          placeholder="전화번호"
          value={this.state.phone}
          onChange={this.handleChange}
          name="phone"
        />
        <button type="submit">등록</button>
      </form>
    );
  }
}

export default PhoneForm;

handleSubmit 함수를 확인해보자. 맨 위에  e.preventDefault() 라는 함수가 호출된다. 이 함수는, 이벤트가 해야하는 작업을 방지시키는 일을한다.

원래는 form 에서 submit이 발생하면 페이지를 다시 불러오게 되는데, 그렇게 되면 우리가 지니고있는 state값을 다 잃어버리게 되니까,

이함수를 통해 리로드를 방지시킨다.

그 다음에는, props로 받은 onCreate 함수를 호출하고, 상태값을 초기화해준다.

render 부분에서는 submit 버튼을 만들고, form 부분에 onSubmit 이벤트를 등록해 주었다.

코드를 다 작성했으면, 제대로 작동되는지 확인해본다.

이제 input은 어떻게 다뤄야 되는지 감을 잡았을 것이다, 이제 App 컴포넌트에서 state 내부에 배열을 선언하고, 

배열안에 PhoneForm에서 입력한것들을 집어넣고, 배열 내부의 데이터를 렌더링하는 방법을 알아보자.

이 글은 Velopert님의 블로그에서 React 포스팅을보며 실습하며 공부한 자료입니다.