[React] props로 하위 컴포넌트에서 상위 컴포넌트 값 변경하기

현재 프로젝트를 하나 진행하면서 하위 컴포넌트에서 상위 컴포넌트로 값을 변경할 일이 생겼네요..

코드를 고치기에는 너무 많이 작업을 하여 그대로 진행하기로 했습니다.

 

하위 컴포넌트에서 상위 컴포넌트로 값 전달하기 알아볼게요

 

---

상위 컴포넌트는 Parents로 하고 

하위 컴포넌트는 Children으로 만들게여

 

Parents.js

import React, { Component } from "react";
import Children from "./Children";

export default class Parents extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

  parentsCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div>
        <Children parentsCount={this.parentsCount} /> //핵심**
        <p>{this.state.count}</p>
      </div>
    );
  }
}

 

Children.js

import React, { Component } from "react";

export default class Children extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.parentsCount}>1add</button>//핵심**
      </div>
    );
  }
}

 하위 Children에서 버튼을 눌러 상위 Parents 안의 count 값을 1+하는 기능입니다.

 

 핵심 내용은

상위(Parents)에서 값을 바꾸는 함수를 만들고 하위(Children)한테 props로 함수를 전달해야 합니다.

 

 

함수를 Children에서 사용하면 상위 컴포넌트의 state 값을 변경할 수 있습니다.