Props

React에서 "props"는 "properties"의 줄임말로, 컴포넌트 간에 데이터를 전달하는 방법입니다.
Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.
이를 통해 자식 컴포넌트는 부모 컴포넌트로부터 전달받은 데이터를 사용할 수 있습니다.

✅ 주요 특징

• 읽기 전용: Props는 자식 컴포넌트에서 변경할 수 없습니다.
  자식 컴포넌트는 전달받은 props를 그대로 사용하거나, 필요에 따라 추가적인 데이터와 함께
  사용할 수 있지만, props 자체를 변경할 수는 없습니다.

• 부모-자식 컴포넌트 관계: Props는 항상 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다.

• 커스터마이징과 재사용성: Props를 통해 같은 컴포넌트에 다른 데이터를 전달함으로써, 컴포넌트의 재사용성을 높일 수 있습니다.
  예를 들어, 동일한 구조의 버튼 컴포넌트에 다른 텍스트나 스타일을 적용할 수 있습니다.

React에서는 컴포넌트를 정의할 때 props를 매개변수로 받아, 이를 통해 부모 컴포넌트로부터 전달된 데이터에 접근할 수 있습니다.
예를 들어, MyComponent라는 컴포넌트가 있다면, 이 컴포넌트는 props 매개변수를 통해 부모 컴포넌트로부터 전달받은 데이터를 사용할 수 있습니다.

✅ 기본 사용 예시

MyComponent라는 컴포넌트를 만들고, 이 컴포넌트가 부모 컴포넌트로부터 name이라는 prop을 받는다고 가정해봅시다.

import React from 'react';

function MyComponent(props) {
  return <h1>안녕하세요, {props.name}!</h1>;
}

이 코드에서 MyComponent는 props라는 매개변수를 가지고 있으며, 이를 통해 부모 컴포넌트로부터 전달된 name prop에 접근합니다.
이 컴포넌트는 h1 태그 내에서 props.name을 사용하여 전달받은 이름을 표시합니다.

import React from 'react';
import MyComponent from './MyComponent'; // MyComponent의 경로에 따라 경로를 조정

function App() {
  return (
    <div>
      <MyComponent name="이름1" />
      <MyComponent name="이름2" />
    </div>
  );
}

이 코드에서 App 컴포넌트는 MyComponent를 두 번 사용하고 있습니다.
각각의 MyComponent에 다른 name prop ("이름1" 및 "이름2")을 전달하고 있습니다.
이를 통해 같은 MyComponent를 사용하면서도 다른 내용을 표시할 수 있습니다.