리액트(React)에서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달과 함수 호출 방법

by

리액트(React) 애플리케이션을 개발하면서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달과 함수 호출은 핵심적인 부분입니다. 컴포넌트 간의 원활한 상호작용을 위해서는 어떻게 데이터를 전달하고 함수를 호출할 수 있는지 이해하는 것이 중요합니다. 이번 포스팅에서는 React에서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달 및 함수 호출 방법을 깊게 알아보겠습니다.

리액트(React)에서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달과 함수 호출 방법


프롭스(props)를 통한 데이터 전달

부모 컴포넌트와 자식 컴포넌트 사이에서 데이터를 주고받는 가장 기본적인 방법은 프롭스(props)를 사용하는 것입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 부모 컴포넌트에서 정의한 속성을 자식 컴포넌트의 프롭스로 전달합니다. 이렇게 전달된 데이터는 자식 컴포넌트에서 ‘this.props’를 통해 접근할 수 있습니다.

아래 예제를 통해 프롭스를 사용한 데이터 전달 방법을 살펴보겠습니다.

import React from 'react';

class ParentComponent extends React.Component {
  render() {
    const message = "Hello from parent!";
    return <ChildComponent message={message} >;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

위 코드에서 ‘ParentComponent’에서 ‘ChildComponent’로 ‘message’라는 데이터를 프롭스로 전달하고 있습니다. 자식 컴포넌트에서는 ‘this.props.message’를 통해 전달된 데이터에 접근하여 화면에 렌더링합니다.


콜백(Callback) 함수를 통한 상호작용

부모 컴포넌트와 자식 컴포넌트 간의 상호작용은 데이터 전달 뿐만 아니라 함수 호출을 통해서도 이루어집니다. 자식 컴포넌트에서 어떤 이벤트가 발생하면 해당 이벤트를 부모 컴포넌트로 전달하여 부모 컴포넌트에서 필요한 작업을 수행할 수 있습니다. 이를 위해 콜백 함수를 사용합니다.

다음 예제에서는 자식 컴포넌트에서 버튼 클릭 이벤트가 발생하면 부모 컴포넌트에서 정의한 콜백 함수가 호출되는 방법을 보여줍니다.

import React from 'react';

class ParentComponent extends React.Component {
  handleChildClick = () => {
    console.log("Button in child clicked!");
  };

  render() {
    return <ChildComponent onClick={this.handleChildClick} >;
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onClick}>Click Me</button>
      </div>
    );
  }
}

위 코드에서 ‘ParentComponent’에서 ‘ChildComponent’로 ‘handleChildClick’이라는 콜백 함수를 전달하고 있습니다. 자식 컴포넌트에서 버튼이 클릭되면 ‘this.props.onClick’을 호출하여 부모 컴포넌트에게 이벤트를 전달합니다. 부모 컴포넌트에서는 해당 이벤트를 처리하는 작업을 수행할 수 있습니다.


자식 컴포넌트의 함수 호출

때로는 자식 컴포넌트의 함수를 부모 컴포넌트에서 직접 호출해야 할 때가 있습니다. 이를 위해 부모 컴포넌트에서 자식 컴포넌트의 ref를 활용하여 함수를 호출할 수 있습니다.

다음 예제에서는 자식 컴포넌트의 ‘getChildData’라는 함수를 부모 컴포넌트에서 호출하는 방법을 보여줍니다.

import React from 'react';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleButtonClick = () => {
    this.childRef.current.getChildData();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleButtonClick}>Call Child Function</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  getChildData = () => {
    console.log("Function in child is called from parent!");
  };

  render() {
    return <p>Child Component</p>;
  }
}

위 코드에서 ‘ParentComponent’에서 ‘ChildComponent’를 렌더링하면서 ‘ref’를 설정하여 자식 컴포넌트의 인스턴스에 접근합니다.

그 후, 부모 컴포넌트의 버튼 클릭 이벤트에서 ‘this.childRef.current.getChildData()’를 호출하여 자식 컴포넌트의 함수를 실행시킵니다.


결론

리액트(React) 애플리케이션에서 부모 컴포넌트와 자식 컴포넌트 간의 데이터 전달과 함수 호출은 중요한 개념입니다. 프롭스를 활용하여 데이터를 전달하고, 콜백 함수를 통해 컴포넌트 간의 상호작용을 구현할 수 있습니다. 또한 ‘ref’를 활용하여 자식 컴포넌트의 함수를 부모 컴포넌트에서 호출할 수 있습니다. 프로젝트의 특정 요구사항과 구조에 맞게 적절한 방법을 선택하여 컴포넌트 간의 데이터 통신과 상호작용을 효율적으로 구현해보세요.


컴포넌트 더 알아보기

Leave a Comment