리액트 뽀개기 (5)

자식에서 부모로 데이터를 전달하는 방법을 알아보자. 

//App.js

class App extends React.Component {
  
  parentState = data => {
    console.log(data);
  }
  render(){
    return ( 
      <div>
        <Child parentState={this.parentState}/>
      </div>
       )
  }
}

위의 코드를 보게 되면 Child에 props로 parentState를 전달한다.  

그리고 parentState()는 data를 받아서 console에 출력해준다. 

 

다음 Child 컴포넌트를 보자.

import React, { Component } from 'react';

class Child extends Component {
    state = {
        name : ''
    }
    handleChange = e => {
        this.setState({
           name : e.target.value
        });
    }
    handlePreventDefault = e => {
        e.preventDefault()
        this.props.parentState(
            this.state.name
        )
    }
    render() {
        return (
          <form>
              <input 
                    value = {this.state.name} 
                    onChange = {this.handleChange}
                />
                <input type="submit" value="전송" onClick={this.handlepreventDefault}/>
          </form>
        );
    }
}

export default Child;

우선 위에서 부터 차례로

state 객체로 부모에게 전달할 값을 만든다.

handleChange는 쉽게 알 수 있다. (리액트의 state 불변성을 유지해줘야 한다 이것은 배열 객체 등등 기존의 것을 건들지 않고 새로운 것으로 만들어야 한다.)

리액트는 spa 를 만드는데 최적화되어있다. 그렇기에 

전송 버튼에서 submit은 post 요청인데 이것을 handlePreventDefault가 기능을 막아준다

또 부모로 전송해줄 것을 전달한다. 

 

인풋입력

결과 출력

아래와 같이 부모한테 전달된 것을 볼 수 있다.