누구든지 하는 리액트 6편: input 상태 관리하기

참고 자료

누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG

 

 

전화번호부 프로젝트 실습을 위해 새 프로젝트 생성

 

 

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

// 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;

1. 클래스형 컴포넌트
   • 클래스형 컴포넌트는 state를 관리할 수 있고, render() 메서드를 통해 UI를 정의한다.
2. 컴포넌트의 초기 상태
   • state 객체는 컴포넌트의 상태를 정의하며 초기 상태로 name이라는 빈 ㅁㄴ자열을 갖고 있다.
   • 컴포넌트 내부에서 관리되는 데이터인 state는 값이 변경되면 컴포넌트는 자동으로 다시 렌더링된다.
3. handleChange 메서드
   • e는 이벤트 객체로 e.target은 이벤트가 발생한 DOM 요소 (여기선 input 요소)를 가리킨다.
   • e.target.value는 DOM 요소의 value 값(여기선 input 텍스트 값)을 나타내며 이를 this.setState를 통해 name 상태에 업데이트 한다.
   • setState는 React의 메서드로 컴포넌트의 상태를 비동기적으로 업데이트한다. 상태가 업데이트 되면 컴포넌트는 다시 렌더링된다.
4. render 메서드
   • 컴포넌트가 UI를 렌더링 할 때 호출된다.
   • form 요소 안에는 input 요소와 div 요소가 포함되어 있다.
     • input 요소는 사용자가 입력할 수 있는 텍스트 필드
     • placeholder=”이름”은 사용자가 텍스트를 입력하지 않았을 때 표시되는 안내 문구
     • value={this.state.name} 입력 필드의 값이 컴포넌트의 name 상태와 동기화되도록 설정
     • onChange={this.handleChange} 입력 필드의 값이 변경될 때마다 handleChange 메서드를 호출하여 name 상태를 업데이트
5. 전체 작동 과정
   1. 컴포넌트가 처음 렌더링 되면 name 상태는 빈 문자열로 설정 input 필드도 비어 있음
   2. 사용자가 input 필드에 텍스트를 입력하면 onChange 이벤트가 발생하여 handleChange 메서드가 호출된다.
   3. handleChange 메서드는 입력된 텍스트를 name 상태에 저장
   4. 상태가 업데이트 되면 컴포넌트가 다시 렌더링 되어 div 요소에 입력된 name 값이 표시

 

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이 여러 개일 때 처리하는 코드이다.

다른 이벤트 핸들러 함수를 만드는 것이 아니라 input에 name 속성을 부여하여 e.target.name을 통해 참조하여 state를 변경한다.

 

 

부모 컴포넌트에게 정보 전달

state 안에 있는 값들을 부모 컴포넌트에게 전달할 차례이다.

부모 컴포넌트에서 메소드를 만들고 이 메소드를 자식에게 전달한 다음 자식 내부에서 호출하는 방식을 사용한다.

App에서 handleCreate 라는 메소드를 만들고 이를 PhoneForm한테 전달해 줄 것이다.

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

// 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;

handleCreate 메소드는 console에 data 값으로 log를 생성한다.

onCreate={this.handleCreate} 는 PhoneForm 컴포넌트가 onCreate라는 prop를 통해 부모 컴포넌트로부터 이벤트 핸들러를 전달받는 경우이다. 부모 컴포넌트가 PhoneForm 컴포넌트를 사용할 때 onCreate 라는 prop를 설정할 수 있다.

// 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;

e.preventDefault() 함수는 원래 이벤트가 해야 하는 작업을 방지시킨다는 의미이다.

원래 form에서 submit이 발생하면 페이지를 다시 불러오는데, 이렇게 되면 기존 상태가 없어지니까 이를 방지하는 역할이다.

그 다음 props로 받은 onCreate 함수를 호출하고 상태값을 초기화 한다.

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

 

콘솔 창을 확인하면 정상적으로 로그가 찍히는 걸 볼 수 있다.