[React] 컴포넌트 간에 데이터를 전달할 때 사용되는 Props

Props란 무엇인가요?

Props는 컴포넌트 간에 데이터를 전달할 때 사용되는 객체입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있으며, 자식 컴포넌트는 이 데이터를 읽기 전용으로 사용할 수 있습니다.

특징

• props는 컴포넌트 간에 데이터를 전달할 때 사용되는 중요한 개념입니다.
• props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법을 제공합니다. (읽기 전용 객체)
• React에서는 기본 자료형 뿐만 아니라 function, React elements (컴포넌트) 등 다양한 자료형을 props로 전달할 수 있습니다.

Props 사용하기

1. 부모 컴포넌트에서 데이터 전달하기:

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

const ParentComponent = () => {
  const data = 'Hello, World!';

  return (
    <div>
      <ChildComponent message={data} />
    </div>
  );
};

export default ParentComponent;

여기서 ParentComponent는 ChildComponent에 message라는 이름의 props를 전달하고 있습니다. data 변수에 저장된 값이 ChildComponent에 전달됩니다.

1. 자식 컴포넌트에서 데이터 받기:

import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ChildComponent;

ChildComponent는 전달받은 props를 통해 message 값을 사용할 수 있습니다. 여기서는 props.message를 이용해 값을 출력하고 있습니다.

Props의 활용

Props를 사용하면 컴포넌트 간에 데이터를 효율적으로 전달할 수 있습니다. 예를 들어, 여러 자식 컴포넌트에 동일한 데이터를 전달해야 할 때 유용합니다. 또한, 부모 컴포넌트의 상태 변화에 따라 자식 컴포넌트도 자동으로 업데이트됩니다.

다음은 더 많은 props를 전달하는 예제입니다:

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

const ParentComponent = () => {
  const data = {
    title: 'Welcome',
    content: 'This is a simple example of props in React.',
  };

  return (
    <div>
      <ChildComponent title={data.title} content={data.content} />
    </div>
  );
};

export default ParentComponent;

그리고 자식 컴포넌트에서는:

import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
};

export default ChildComponent;

이렇게 하면 title과 content라는 두 개의 props가 자식 컴포넌트로 전달됩니다.

 

Props의 주요 기능

1. 데이터 전달: Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 역할을 합니다. 이로 인해 컴포넌트 간의 데이터 공유가 용이해집니다.
2. 컴포넌트 재사용성 증대: Props를 사용하면 동일한 컴포넌트를 여러 곳에서 다른 데이터로 재사용할 수 있습니다. 이는 코드의 유지보수성을 높이고, 중복을 줄이는 데 도움이 됩니다.
3. 상태 관리: Props는 읽기 전용으로, 자식 컴포넌트는 Props를 직접 수정할 수 없습니다. 따라서 컴포넌트 간 상태 관리를 명확하게 하고, 의도치 않은 데이터 변조를 방지합니다.

Props의 사용 용도

1. UI 컴포넌트 구성: Props를 사용하여 다양한 UI 컴포넌트를 구성할 수 있습니다. 예를 들어, 버튼 컴포넌트에 텍스트나 스타일을 Props로 전달하여 다양한 형태의 버튼을 생성할 수 있습니다.
2. 동적 데이터 렌더링: Props를 사용하여 동적으로 변하는 데이터를 렌더링할 수 있습니다. 부모 컴포넌트에서 상태를 관리하고, 해당 상태를 Props로 자식 컴포넌트에 전달하여 UI를 업데이트할 수 있습니다.
3. 이벤트 핸들링: Props를 통해 이벤트 핸들러 함수를 자식 컴포넌트에 전달할 수 있습니다. 예를 들어, 버튼 클릭 이벤트를 부모 컴포넌트에서 처리하고자 할 때 유용합니다.

Props의 동작 방식

1. 부모 컴포넌트에서 전달: 부모 컴포넌트는 자식 컴포넌트를 호출할 때 Props를 함께 전달합니다. Props는 객체 형태로 전달되며, 키-값 쌍으로 이루어져 있습니다.

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

const ParentComponent = () => {
  const data = 'Hello, World!';

  return (
    <div>
      <ChildComponent message={data} />
    </div>
  );
};

export default ParentComponent;

1. 자식 컴포넌트에서 사용: 자식 컴포넌트는 전달받은 Props를 props 객체를 통해 접근합니다. 이를 통해 부모 컴포넌트로부터 전달된 데이터를 사용할 수 있습니다.

import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ChildComponent;

1. Props의 불변성: Props는 읽기 전용이기 때문에 자식 컴포넌트에서 직접 수정할 수 없습니다. 이는 데이터의 일관성을 유지하고, 예기치 않은 상태 변화를 방지하는 데 도움이 됩니다.

import React from 'react';

const ChildComponent = (props) => {
  // props.message = 'New Message'; // 오류 발생
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ChildComponent;

 

Props는 리액트의 컴포넌트 간 데이터 전달에 중요한 역할을 합니다. Props를 활용하면 컴포넌트를 효율적으로 재사용하고, 동적인 데이터 렌더링을 구현할 수 있습니다. 또한, Props의 읽기 전용 특성은 데이터의 일관성을 유지하는 데 큰 도움이 됩니다.