react props

    
 React에서 `props`는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. 

다음은 `props`를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 기본적인 방법입니다:

1. **자식 컴포넌트 정의**:

먼저, 자식 컴포넌트를 정의하고 `props`를 사용하여 전달받은 데이터를 활용합니다.

```jsx
function ChildComponent(props) {
  return <div>{props.message}</div>;
}
```

2. **부모 컴포넌트에서 자식 컴포넌트 사용**:

부모 컴포넌트에서 자식 컴포넌트를 사용하면서 `props` 값을 설정하여 전달합니다.

```jsx
function ParentComponent() {
  return <ChildComponent message="Hello from Parent!" />;
}
```

또한, 비구조화 할당 (destructuring)을 사용하여 `props`를 더 깔끔하게 활용할 수 있습니다:

```jsx
function ChildComponent({ message }) {
  return <div>{message}</div>;
}
```

이렇게 하면 `props` 내부의 특정 속성만을 직접적으로 접근할 수 있어 코드가 간결해집니다.

추가적으로, `props`를 사용하여 함수나 이벤트 핸들러도 자식 컴포넌트로 전달할 수 있습니다. 이를 통해 부모-자식 컴포넌트 간의 상호작용을 구현할 수 있습니다.

React의 `props`는 읽기 전용입니다. 즉, 자식 컴포넌트 내에서 `props`의 값을 직접 변경할 수 없습니다. 값을 변경해야 할 경우, 부모 컴포넌트로부터 상태 변경 함수 (예: `setState` 또는 `useState`의 상태 업데이트 함수)를 함께 전달받아 사용합니다.