[javascript] 리액트 컴포넌트 간의 데이터 통신 방법

22 Dec 2023

javascript

리액트 애플리케이션에서 컴포넌트는 종종 서로 데이터를 주고받아야 합니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하거나, 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하는 방법이 필요할 수 있습니다. 이 기사에서는 리액트 컴포넌트 간의 데이터 통신을 위한 몇 가지 방법을 살펴보겠습니다.

1. Props를 활용한 데이터 전달

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 가장 기본적인 방법은 props를 활용하는 것입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 props를 사용하여 데이터를 전달할 수 있습니다.

예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 name이라는 prop을 전달하는 방법은 다음과 같습니다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div>
      <ChildComponent name="John" />
    </div>
  );
};

export default ParentComponent;

ChildComponent에서는 props를 통해 전달된 데이터를 다음과 같이 활용할 수 있습니다.

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  return <p>Hello, {props.name}!</p>;
};

export default ChildComponent;

2. 이벤트를 통한 상위 컴포넌트로의 데이터 전달

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 하는 경우, 이벤트를 통해 상위 컴포넌트로 데이터를 전달할 수 있습니다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트에서 해당 이벤트를 처리하는 방식으로 데이터를 전달할 수 있습니다.

예를 들어, 자식 컴포넌트에서 버튼 클릭 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 방법은 다음과 같습니다.

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  const handleClick = () => {
    props.onButtonClick('Data from child component');
  };

  return <button onClick={handleClick}>Click me</button>;
};

export default ChildComponent;

부모 컴포넌트에서는 자식 컴포넌트를 호출할 때, 해당 이벤트를 props로 받아서 처리하는 방식으로 데이터를 전달받을 수 있습니다.

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleChildClick = (data) => {
    console.log(data); // 출력: Data from child component
  };

  return (
    <div>
      <ChildComponent onButtonClick={handleChildClick} />
    </div>
  );
};

export default ParentComponent;

요약

리액트 애플리케이션에서 데이터를 효율적으로 컴포넌트 간에 전달하기 위해 props와 이벤트를 통한 데이터 통신 방법을 활용할 수 있습니다. 이를 통해 각 컴포넌트가 독립적으로 동작하면서도 필요에 따라 데이터를 주고받을 수 있습니다.

이상으로 리액트 컴포넌트 간의 데이터 통신 방법에 대해 알아보았습니다.

참고 문헌: React Official Documentation