[React] 컴포넌트의 데이터 관리 ③ - 콜백 함수

2020/08/18 - [Web프런트엔드/리액트] - [React] 리액트 개발환경 구축

2020/09/09 - [Web프런트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정

2020/09/11 - [Web프런트엔드/리액트] - [React] 리액트에서 사용하는 JSX

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자

2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티

2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트

---

 지난 시간에 state 기능으로 내부 데이터를 관리해봤습니다. 하지만 부모(App) 컴포넌트는 딱히 하는 게 없고, 자식 컴포넌트인 StateComponent에서 모든 기능을 담당했습니다. 오늘은 부모가 데이터 관리를 하고 자식에게 그 데이터를 조작하는 기능을 넘기는, 즉 함수형 프로퍼티를 전달해 자식이 함수를 다시불러오는 것을 배워보겠습니다.

 

// ..\test_project\src\App.js
 
import React, { Component } from "react";
import CallbackComponent from "./components/CallbackComponent";
 
class App extends Component {
  // 클래스 생성자 (ES6 관련 포스팅에서 설명)
  constructor(props) {
    // 생성자 정의를 하면 꼭 props를 전달
    super(props);
 
    // 스테이트값은 꼭 초기화!!!
    this.state = {
      count: 1,
      isTen: false,
    };
 
    // countUp함수에서 this.state 객체인식을 위해 바인딩
    this.countUp = this.countUp.bind(this);
  }
 
  countUp() {
    // 숫자 증가
    const countTemp = this.state.count + 1;
    let isTenTemp = this.state.isTen;
 
    // 10이상이면 true
    if (countTemp >= 10) isTenTemp = true;
 
    // 스테이트값 변경은 꼭 리액트의 setState 메서드 사용
    this.setState({
      count: countTemp,
      isTen: isTenTemp,
    });
 
    // 로그를 보면 값이 바로 변경되지 않고 한타임 느리게 바뀜
    console.log("countUp함수에서 값 : ", this.state.count);
  }
 
  render() {
    return (
      <div>
        {/* 자식 컴포넌트에 프로퍼티값으로 부모의 스테이트값 대입 */}
        <CallbackComponent
          count={this.state.count}
          isTen={this.state.isTen}
          countUp={this.countUp}
        />
      </div>
    );
  }
}
 
export default App;

 

 전 스테이트 관련 포스팅과 비교해보면 자식 컴포넌트에 있던 기능들이 대부분 부모(App) 컴포넌트로 넘어왔습니다. 코드는 거의 변경이 없지만, 중요한 부분은 render함수에서 CallbackComponent를 표시할 때 자식 프로퍼티 값으로 부모의 스테이트 값을 대입하는 부분입니다. 특히 countUp 프로퍼티로 넘기는 부분이 콜백 함수라 할 수 있습니다.

 

// ..\test_project\src\components\CallbackComponent.jsx
 
import React, { Component } from "react";
import PropTypes from "prop-types";
 
class CallbackComponent extends Component {
  render() {
    return (
      <div>
        {/* 부모에게 받은 프로퍼티 값 표시 */}
        <p>숫자값 : {this.props.count}</p>
        <p>10이상 : {String(this.props.isTen)}</p>
        {/* 이 부분이 콜백 함수 */}
        <button onClick={this.props.countUp}>카운트</button>
      </div>
    );
  }
}
 
// 프로퍼티 타입 설정
CallbackComponent.propTypes = {
  count: PropTypes.number,
  isTen: PropTypes.bool,
  countUp: PropTypes.func,
};
 
export default CallbackComponent;

 

 자식 컴포넌트인 CallbackComponent는 이제 화면에 뿌려주는 기능만 남았습니다. 크게 바뀐 부분은 부모에게 받은 프로퍼티 값으로 표시를 하고, 버튼을 클릭하는 기능도 부모 컴포넌트에 구현된 함수를 쓰고 있습니다. 바로 이 부분이 콜백 함수라 할 수 있습니다. 정리를 하자면 스테이트 값으로 내부 데이터 관리를 하고, 외부와의 연결은 프로퍼티로 값을 넘기거나 아니면, 데이터 조작이 가능한 콜백 함수를 넘기면 되는 것입니다.

 

여기까지 세 번에 걸쳐 컴포넌트의 데이터 관리에 대해 알아봤습니다.

앞으로 더 심도 있는 기능들이 많이 남아있으니, 일단 간단한 데이터 관리는 여기까지 하겠습니다.

 

여기까지는 참 쉽죠?

---

2020/09/22 - [Web프론트엔드/리액트] - [React] 컴포넌트의 형태를 분류해보자