부모 자식 연결하기

INDEX.JS

import React, {Component} from "reat";
import FirstChild from "./components/Firstchild";
import SecondChlid from "./components/SecondChild";
import "./index/scss"


class index extends Component {
  state = {
    num: 0
  };

  plusHandler = () => {
    console.log( "나는 더하기 ")
    this.setState ({num: this.state.num+1})
  }
//얘를 firstchild에 준다. 
  
  minusHandler = () => {
    console.log( "나는 빼기 ")
    this.setState ({num: this.state.num-1})
  } //얘를 firstchild에 준다.

  render() {
    return (
      <div className="lifting-state-up-parent">
        <div className="top">나는 부모</div>
        <div className="bottom">
          <button>+</button>
          <button>-</button>
          <FirstChild   plus = {this.plusHandler}  minus = {this.minusHandler}/>
          <SecondChild num={this.state.num}  />
   
        </div>
      </div>
    );
  }
}

export default index;

FirstChild.js

import React, { Component } from "react";

class FirstChild extends Component {
render() {
console.log( this.props )
return (

  <div className="first-child">
    FirstChild
    <div>여기서 누르는 버튼이</div>
    <div className="body">
    
      <button onClick={this.props.minus}>-</button>
      <button onClick={this.props.plus}>+</button>
    </div>
  </div>
);

}
}

export default FirstChild;

import React, { Component } from "react";

class FirstChild extends Component {
  render() {
    console.log( this.props )
    return (
      <div className="first-child">
        FirstChild
        <div>여기서 누르는 버튼이</div>
        <div className="body">
        
          <button onClick={this.props.minus}>-</button>
          <button onClick={this.props.plus}>+</button>
        </div>
      </div>
    );
  }
}

export default FirstChild;

SecondChild.js

import React, { Component } from "react";

class SecondChild extends Component {
  render() {
    return (
      <div className="second-child">
        SecondChild
        <div>여기 내용을 변경해야 할 때</div>
        <div className="body">{this.props.num}</div>
      </div>
    );
  }
}

export default SecondChild;