컴포넌트 간 데이터 전달: Props를 사용하여 데이터를 자식 컴포넌트로 전달하는 방법.

작성일 : 2024-06-21

컴포넌트 간 데이터 전달: Props를 사용하여 데이터를 자식 컴포넌트로 전달하는 방법

리액트는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트가 독립적으로 동작하며, 이를 조합하여 복잡한 UI를 구성합니다. 이러한 컴포넌트 간의 데이터 전달은 매우 중요한 개념으로, Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하기 위해 사용하는 기본적인 방법입니다. 이 글에서는 Props의 개념과 이를 활용한 데이터 전달 방식을 자세히 살펴보겠습니다.

Props란 무엇인가?

Props는 properties(속성)의 줄임말로, 리액트에서 컴포넌트가 다른 컴포넌트로 전달하는 데이터를 의미합니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로만 전달되며, 자식 컴포넌트는 해당 데이터를 읽기 전용으로 사용할 수 있습니다. Props를 통해 컴포넌트 간 결합도를 낮추고 재사용 가능한 코드를 작성할 수 있습니다.

리액트에서 Props를 사용하는 핵심 개념은 다음과 같습니다:

Props는 오직 읽기 전용입니다.
Props는 객체 형태로 전달됩니다.
자식 컴포넌트는 부모 컴포넌트가 전달한 데이터를 변경할 수 없습니다.

다음은 Props를 이용하여 데이터를 전달하는 간단한 예제입니다:


javascript
import React from 'react';

function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

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

export default ParentComponent;

위 예제에서 ParentComponent는 ChildComponent에게 name이라는 Prop을 전달합니다. ChildComponent는 이를 받아와 화면에 렌더링합니다. 이처럼 간단한 방식으로 데이터를 전달할 수 있습니다.

다양한 데이터 타입의 Props

Props는 텍스트뿐만 아니라 다양한 데이터 타입을 가질 수 있습니다. 예를 들어, 숫자, 배열, 객체, 함수 등 모든 자바스크립트 타입을 Props로 전달할 수 있습니다. 다음 예제를 통해 다양한 데이터 타입을 가진 Props를 전달하는 방법을 확인해보겠습니다:


javascript
import React from 'react';

function ChildComponent(props) {
  const { age, hobbies, contact } = props;
  return (
    <div>
      <p>Age: {age}</p>
      <p>Hobbies: {hobbies.join(', ')}</p>
      <p>Contact: {contact.email}</p>
    </div>
  );
}

function ParentComponent() {
  return (
    <ChildComponent 
      age={30}
      hobbies={["Reading", "Traveling", "Cooking"]}
      contact={{ email: "john.doe@example.com" }}
    />
  );
}

export default ParentComponent;

위 코드에서 ParentComponent는 ChildComponent에게 숫자 (age), 배열 (hobbies), 객체 (contact)를 Props로 전달합니다. ChildComponent는 이를 받아와 각각의 데이터를 화면에 렌더링합니다.

Props를 사용한 함수 전달

컴포넌트 간의 데이터 전달뿐만 아니라 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달하기 위해 함수 또한 Props로 전달할 수 있습니다. 이 방법은 특히 버튼 클릭과 같은 이벤트를 부모 컴포넌트에서 처리하고자 할 때 유용합니다. 다음 예제를 통해 알아보겠습니다:


javascript
import React from 'react';

function ChildComponent(props) {
  return (
    <button onClick={props.handleClick}>Click Me!</button>
  );
}

function ParentComponent() {
  const handleButtonClick = () => {
    alert("Button was clicked!");
  };
  return (
    <ChildComponent handleClick={handleButtonClick} />
  );
}

export default ParentComponent;

위 코드에서 ParentComponent는 handleButtonClick 함수를 정의하고 이를 ChildComponent에 Props로 전달합니다. ChildComponent는 버튼 클릭 시 이 함수를 호출하여 부모 컴포넌트의 로직을 실행합니다.

Props와 PropTypes

PropTypes는 컴포넌트가 전달받는 Props의 데이터 타입을 검사하기 위한 도구입니다. 이를 통해 Props가 예상한 타입을 가지는지 확인하고, 잘못된 타입이 전달되었을 경우 경고 메시지를 출력하여 디버깅을 용이하게 만들 수 있습니다. 다음 예제를 통해 PropTypes를 사용하는 방법을 소개합니다:


javascript
import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ChildComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

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

export default ParentComponent;

위 코드에서 ChildComponent는 name이라는 Prop이 문자열이어야 하며, 반드시 전달되어야 한다고 명시하고 있습니다. 만약 name이 전달되지 않거나 다른 타입이 전달될 경우 콘솔에 경고 메시지가 출력됩니다.

정리

이번 글에서는 리액트의 Props 개념과 이를 활용한 컴포넌트 간 데이터 전달 방법을 알아보았습니다. Props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하는 기본적인 방법으로, 다양한 데이터 타입과 함수도 전달할 수 있습니다. 또한, PropTypes를 사용하여 Props의 타입을 검사하고 디버깅을 도와줄 수 있습니다. 이를 활용하여 보다 유지보수성 높고 재사용 가능한 컴포넌트를 작성해보세요.