컴포넌트 재사용을 위한 props 설계 패턴

React에서 컴포넌트를 잘 만든다는 것은 **"재사용 가능하게 만든다"**는 뜻입니다.
그리고 그 핵심은 바로 props 설계입니다.

이번 글에서는 실무에서 자주 사용하는 props 설계 패턴을
기초부터 실전 예제까지 정리해보겠습니다.
특히 children, 조건부 렌더링, 기본값 설정, 컴포넌트 API 설계 방식까지 함께 다룹니다.

✅ props란?

props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다.
React 컴포넌트는 기본적으로 "순수 함수"로 설계되며,
입력(props)에 따라 결과(JSX)를 반환합니다.

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

// 사용
<Welcome name="React" />

🔹 구조 분해 할당으로 props 다루기

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

✅ 구조 분해로 가독성 향상
✅ 여러 props를 넘길 때 특히 유용

🔹 기본값 설정 (defaultProps 또는 ES6 기본값)

방법 1: ES6 기본값

function Button({ label = "기본 버튼" }) {
  return <button>{label}</button>;
}

방법 2: defaultProps (함수형에서도 사용 가능)

Button.defaultProps = {
  label: "기본 버튼",
};

✅ 기본값을 설정해두면 예외 상황을 줄일 수 있음

🔹 조건부 렌더링 기반 API 설계

function Alert({ type, message }) {
  if (!message) return null;

  const color = type === "error" ? "red" : "green";
  return <p style={{ color }}>{message}</p>;
}

✅ type 값을 통해 다양한 렌더링이 가능하도록 유연하게 설계
✅ message가 없을 때는 null 반환으로 렌더링 생략

🔹 children을 활용한 Slot 패턴

props.children을 사용하면 유연하고 재사용 가능한 UI를 만들 수 있습니다.

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

// 사용 예
<Card>
  <h2>제목</h2>
  <p>내용입니다</p>
</Card>

✅ Slot 구조를 만들 수 있어 매우 재사용성이 좋음

🔹 Wrapper Component 설계 예제

function Modal({ visible, children }) {
  if (!visible) return null;

  return (
    <div className="modal">
      <div className="content">{children}</div>
    </div>
  );
}

// 사용
<Modal visible={isOpen}>
  <p>모달 안의 콘텐츠</p>
</Modal>

✅ visible props로 조건 제어 + children으로 내용 삽입 → 완벽한 컴포넌트 API

🔹 고정된 데이터 전달 vs 동적인 상태 전달

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age}살</p>
    </div>
  );
}

// 부모 컴포넌트에서 상태 전달
<UserCard name={user.name} age={user.age} />

✅ 상위 상태를 props로 계속 흘려보내는 구조가 가장 React다운 방식입니다.

🧠 오늘의 요약

패턴 설명

구조 분해	props를 깔끔하게 관리
기본값 설정	예외 방지용
조건부 렌더링	유연한 렌더링 로직 구현
children 활용	Slot 패턴, Wrapper 컴포넌트
props 설계 전략	확장 가능하고 일관된 컴포넌트 API 구성

🧪 실습 과제

props.children을 활용한 Card, Modal, Layout 컴포넌트를 만들어보세요
defaultProps나 기본값을 활용해 예외 상황을 막아보세요
type props로 스타일이 바뀌는 Button 컴포넌트를 만들어보세요

📌 다음 글 예고

👉 useEffect 완전 이해 – 의존성 배열과 클린업 함수의 진실

컴포넌트 생명주기 vs useEffect
의존성 배열의 의미
클린업 함수의 역할과 타이밍

React props 전달, props children, 컴포넌트 재사용, React 컴포넌트 설계, Slot 패턴, 조건부 렌더링 컴포넌트, defaultProps, Wrapper 컴포넌트, 컴포넌트 API 설계, React 재사용성 높이기