React 자식 컴포넌트에서 부모로 데이터 보내기

앞서 포스팅한 React input 상태관리를 그대로 이어서 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내는 것을 복습겸 정리하도록 하겠습니다. 

 

 

App.js

import React, { Component } from 'react';
import JoinForm from './components/JoinForm';
import './App.css';
class App extends Component {
  id = 0;
  state = {
    memberInfo: [],
  };
  handleCreate = (data) => {
    const { memberInfo } = this.state;
    this.setState({
      memberInfo: memberInfo.concat({
        ...data,
        id: this.id++,
      }),
    });
  };
  render() {
    const { memberInfo } = this.state;
    return (
      <div>
        <JoinForm onCreate={this.handleCreate} />
        <div>
          <span>
            자식 컴포넌트에서 보낸 데이터 부모 컴포넌트로 받아온 배열 : {JSON.stringify(memberInfo)}
          </span>
        </div>
      </div>
    );
  }
}

export default App;

자식 컴포넌트인 JoinForm에 onCreate이벤트를 사용하여 handleCreate 메서드를 props로 전달한다.

handleCreate 메서드는 JoinForm(자식컴포넌트)에서 부모 컴포넌트(App.js) 값을 보냈을 때 데이터를 받아 정보를 memberInfo 배열에 저장하는 역할을 할 메서드이다;

 

JoinForm.js

import React, { Component } from 'react';

class JoinForm extends Component {
  state = {
    name: '',
    firstPassword: '',
    lastPassword: '',
    checkPassword: '📝패스워드 입력📝',
  };
  //input onChange 이벤트
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
    // 파라미터로 받은 event.target.name이 name 아닐 경우에만 handleCheck함수 실행
    // setTimeout으로 딜레이를 준 이유는 딜레이를 주지 않았을 경우 setState 변경된 값이 handleCheck에서 바로 반영되지 않음
    if (e.target.name !== 'name') {
      setTimeout(this.handleCheck, 100);
    }
  };
  //비밀번호 체크
  handleCheck = () => {
    const { firstPassword, lastPassword } = this.state;
    // 비밀번호 무입력 상태일 때와 둘 중에 하나의 값이 입력 상태가 아닐때
    if (firstPassword.length < 1 || lastPassword.length < 1) {
      this.setState({
        checkPassword: '📝패스워드 입력📝',
      });
      // 비밀번호가 같다면 일치
    } else if (firstPassword === lastPassword) {
      this.setState({
        checkPassword: '✅일치 ✅',
      });
      // 비밀번호가 같지 않다면 불일치
    } else {
      this.setState({
        checkPassword: '❌불일치 ❌',
      });
    }
  };

  // 자식 컴포넌트에서 부모 컴포넌트로 값 보내기
  handleSubmit = (e) => {
    const { name, firstPassword, lastPassword } = this.state;
    e.preventDefault();
    this.props.onCreate({
      name: name,
      firstPassword: firstPassword,
      lastPassword: lastPassword,
    });

    this.setState({
      name: '',
      firstPassword: '',
      lastPassword: '',
      checkPassword: '📝패스워드 입력📝',
    });
  };
  render() {
    const { name, firstPassword, lastPassword, checkPassword } = this.state;
    return (
      <div>
        <form className="joinForm" onSubmit={this.handleSubmit}>
          <input name="name" onChange={this.handleChange} value={name} placeholder="이름 " />
          <input
            name="firstPassword"
            onChange={this.handleChange}
            value={firstPassword}
            placeholder="비밀번호"
          />
          <input
            name="lastPassword"
            onChange={this.handleChange}
            value={lastPassword}
            placeholder="비밀번호 확인"
          />
          <button type="sumbit">등록</button>
        </form>
        <div className="showText">
          <span>이름 : {name} </span>
          <span>비밀번호 : {firstPassword}</span>
          <span>비밀번호확인 : {lastPassword}</span>
          <span>일치여부 : {checkPassword}</span>
        </div>
      </div>
    );
  }
}

export default JoinForm;

form 태그 내에 onSubmit 이벤트를 사용하여 button 으로 submit 이벤트 발생시 JoinForm에 있는 메서드인 handleSubmit 메서드로 데이터를 보내게 된다.

 

  // 자식 컴포넌트에서 부모 컴포넌트로 값 보내기
  handleSubmit = (e) => {
    const { name, firstPassword, lastPassword } = this.state;
    e.preventDefault();
    this.props.onCreate({
      name: name,
      firstPassword: firstPassword,
      lastPassword: lastPassword,
    });

    this.setState({
      name: '',
      firstPassword: '',
      lastPassword: '',
      checkPassword: '📝패스워드 입력📝',
    });
  };

기본적으로 submit 이벤트 발생시 페이지를 새로고침하기 때문에 이러한 것을 막아주기 위해 이벤트 발생시 e.preventDefault()를 사용해야한다. 그리고 this.props.onCreate를 사용하여 현재 입력받은 값을 부모 컴포넌트로 보내주도록한다. 이후 아래와 같이 부모 컴포넌트인 App.js에 handleCreate 메서드에서 자식 컴포넌트에서 보내온 데이터를 받아올 수 있게 된다.

 

 

  handleCreate = (data) => {
    console.log(data);
    const { memberInfo } = this.state;
    this.setState({
      // 받아온 object 객체를 배열에 저장하기 위해 concat 속성을 사용하였다.
      // ...는 비구조화 할당
      memberInfo: memberInfo.concat({
        ...data,
        id: this.id++,
      }),
    });
  };

console.log(data) 자식 컴포넌트에서 보낸 data 부모 컴포넌트에서 값 확인

          <span>
            자식 컴포넌트에서 보낸 데이터 부모 컴포넌트로 받아온 배열 : {JSON.stringify(memberInfo)}
          </span>

출력은 object인 memberInfo를 JSON.stringify() 메서드를 사용하여 문자열로 변환