[React] 부모-자식 컴포넌트 간 데이터 전달 방법 (Passing Data Between a Parent and Child in React)

[React] 부모-자식 컴포넌트 간 데이터 전달 방법 (Passing Data Between a Parent and Child in React)

React에서 부모 컴포넌트와 자식 컴포넌트 사이에 데이터가 전달되는 방식에 대해 알아보겠습니다. 데이터가 갈 수 있는 방향은 두 가지이며 다음과 같습니다.

• 부모 -> 자식
• 자식 -> 부모

부모에서 자식으로 데이터 보내기 (Passing Data From Parent to Child)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야되는 경우 props를 사용하면 쉽게 해결할 수 있습니다. 예를 들어 부모와 자식이라는 두 개의 컴포넌트가 있고 부모의 상태를 자식에게 전달하려고 한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다.

// Parent Component
import Child from "./components/Child";

export default function App() {
  return (
    <div className="App">
      <Child title="부모로부터 전달받은 타이틀 데이터" />
    </div>
  );
}



// Child Component
import { useState } from "react";

interface IProps {
  title: string;
}

export default function Child({ title }: IProps) {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);

  return (
    <div>
      <p>{ title }</p>
      <button onClick={onDecrease}>-</button>
      카운트
      <button onClick={onIncrease}>+</button>
      <p>{count}</p>
    </div>
  );
}

보시다시피 부모 컴포넌트는 props 통해 자식 컴포넌트에 데이터를 전달하고, 자식 컴포넌트는 내려받은 props를 활용해서 부모 데이터에 접근하고 사용할 수 있습니다.

자식에서 부모로 데이터 보내기 (Passing Data from Child to Parent)

자식에서 부모 구성 요소로 데이터를 전달하는 것은 약간 까다롭습니다. 데이터를 전달하려면 아래 단계를 수행해야 합니다.

• 부모 컴포넌트에서 콜백 함수(Callback Function)를 만듭니다. 이 콜백 함수는 자식 컴포넌트에서 데이터를 가져옵니다.
• 부모의 콜백 함수를 자식 컴포넌트의 props로 넘겨줍니다.
• 자식 컴포넌트는 props를 사용하여 부모 콜백 함수를 호출합니다.

예제를 사용하여 이러한 단계를 구현하는 방법을 살펴보겠습니다. 부모와 자식이라는 컴포넌트가 있습니다. 자식 컴포넌트에는 카운터 예제가 구현되어 있으며, 버튼을 누를 때마다 count 값이 업데이트됩니다. 우리는 업데이트된 count 값을 부모 컴포넌트에 즉시 전달할 것입니다.

// 부모 컴포넌트
import Child from "./components/Child";

export default function App() {
  function handleCallback(count: number) {
    console.log(count);
  }
  return (
    <div className="App">
      <Child
        title="부모로부터 전달받은 타이틀 데이터"
        parentCallback={handleCallback}
      />
    </div>
  );
}



// 자식 컴포넌트
import { useState, useEffect } from "react";

interface IProps {
  title: string;
  parentCallback: (count: number) => void;
}

export default function Child({ title, parentCallback }: IProps) {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);

  useEffect(() => {
    parentCallback(count);
  });

  return (
    <div>
      <p>{title}</p>
      <button onClick={onDecrease}>-</button>
      카운트
      <button onClick={onIncrease}>+</button>
      <p>{count}</p>
    </div>
  );
}

자식 컴포넌트에서 count 값이 변경될 때마다 useEffect hook에서 부모 컴포넌트에서 전달받은 parentCallback 콜백함수를 호출합니다. parentCallback 콜백함수를 통해 부모는 자식으로부터 받은 데이터를 처리할 수 있습니다. 해당 예시에서 부모 컴포넌트는 handleCallback 함수에서 전달받은 count 값을 로그찍는 것을 확인할 수 있습니다.

정리

React에서 부모 컴포넌트와 자식 컴포넌트 사이에 데이터를 전달하는 방법을 살펴보았습니다. 요약하자면 다음은 우리가 다룬 다양한 방법입니다.

• 부모에서 자식으로 데이터를 전달할 때는 props를 통해 해결하면 된다.
• 자식에서 부모로 데이터를 전달할 때는 부모의 콜백함수를 자식 컴포넌트로 전달해서 해결한다.