// Profile.jsx (자식 컴포넌트)
function Profile(props) {
  // props는 객체 형태로 전달됨
  console.log(props);
  // { name: "김철수", age: 25, isMember: true }

  return (
    <div className="border border-gray-300 p-5 m-2 rounded">
      <h2>이름: {props.name}</h2>
      <p>나이: {props.age}세</p>
      <p>회원여부: {props.isMember ? "정회원" : "준회원"}</p>

      {/* props를 이용한 조건부 렌더링 */}
      {props.isMember && <span className="text-green-500">✓ 인증됨</span>}
    </div>
  );
}

export default Profile;

import './Button.css';

function Button(props) {
  // props로 버튼의 모양과 동작을 커스터마이징
  return (
    <button
      className={`btn ${props.size === 'large' ? 'btn-lg' : ''}`}
      style={{ backgroundColor: props.color || '#007bff' }}
      onClick={props.onClick}
      disabled={props.disabled}
    >
      {props.text}
    </button>
  );
}

export default Button;

.btn {
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

.btn-lg {
  font-size: 18px;
}

import Button from './Button';

function App() {
  return (
    <div>
      <Button text="기본 버튼" />
      <Button text="빨간 버튼" color="red" />
      <Button text="큰 버튼" size="large" color="#28a745" />
    </div>
  );
}

> 
> **After (구조 분해 할당 사용)**
> ```jsx
function Profile({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>나이: {age}</p>
    </div>
  );
}

### 1.4.2. Children의 활용

Card 안에 Button을 넣어서 컴포넌트를 조합하는 예제이다.



#### Button.jsx


```jsx
import './Button.css';

function Button({ children, color }) {
  return (
    <button
      className="btn"
      style={{ backgroundColor: color || '#007bff' }}
    >
      {children}
    </button>
  );
}

export default Button;

import './Card.css';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default Card;

import Card from './Card';
import Button from './Button';

function App() {
  return (
    <div>
      {/* Card 안에 텍스트 + Button 조합 */}
      <Card>
        <h2>회원가입</h2>
        <p>아래 버튼을 눌러 가입하세요.</p>
        <Button>가입하기</Button>
      </Card>

      <Card>
        <h2>설정</h2>
        <p>계정을 관리합니다.</p>
        <Button color="#28a745">저장</Button>
        <Button color="red">삭제</Button>
      </Card>
    </div>
  );
}

.btn {
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 8px;
}

.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  margin: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}