[React] Input 태그를 통해, props 개념을 알아보자

💡 본 글은 https://velopert.com/3634 의 내용을 실습하며 정리하였습니다.

📁 Public
	📄index.html
📁 src
	📄 App.js
	📄 index.js
📁 Package.json

먼저 프로젝트 초기 세팅으로 볼 수 있는 파일 디렉토리 입니다.

📁 Public
	📄index.html
📁 src
	📁 components
		📄 PhoneForm.js
	📄 App.js
	📄 index.js
📁 Package.json

components 디렉토리를 추가 후 , PhoneForm 컴포넌트를 만들고, App.js도 클래스 명령을 사용하여 컴포넌트화 하였습니다.

//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 form 생성, 입력값으로 value설정해주기

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

부모컴포넌트에게 값 전달하기

state 안에 있는 값들을 부모 컴포넌트에게 전달해줄 겁니다. 다음과 순서를 따라해봅시다.

1. 부모 컴포넌트에 메소드 만들기 (handleCreate)
2. 만든 메소드를 자식 컴포넌트에 전달
3. 자식 컴포넌트 내부에서 호출 (PhoneForm에서 submit시, props로 전달받은 함수 호출)

//file:
//📁 src
// 📄 App.js

class App extends Component {

  handleCreate = (data) => {
    console.log(data)
  }
  render() {
    return (
      <div>
        <PhoneForm 
        onSave={this.handleCreate}
        />
      </div>
    )
  }
}

handleCreate함수를 생성 후, props로 전달하기 위해 onSave를 만들어 주었습니다.

//file:
//📁 src
// 📁 components
// 📄 PhoneForm.js

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

  handleSubmit = e => {
    e.preventDefault();
    //페이지 리로딩 방지
    this.props.onSave(this.state)
    //상태값을 onSave를 통해서 부모에게 전달했습니다.
    this.setState({
      name: '',
      phone: ''
    }) //상태값 초기화 시켜주기
  }
  render() {
    return (
      <form>
        <input
	(생략)
        />
        <input
	(생략)
        />
        <button type="submit">등록</button>
      </form>
    )
  }
}

handleSubmit은 App.js로 전달받은 함수 this.props.onSave를 실행하며 this.state의 값을 부모에게 전달합니다.

e.preventDefault() 라는 함수는 원래 이벤트가 해야하는 작업을 방지시킨다는 의미입니다.
원래는 form에서 submit이 발생하면 페이지를 다시 불러오게 되는데,, 그렇게 되면 지니고 있는 상태를 다 잃어버리게 되기에, 이를 통해서 방지해주었습니다 :)

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