CustomComponent

---

🧩 CustomComponent란?

정의

CustomComponent는 기본 HTML 요소가 아니라 개발자가 직접 만든 재사용 가능한 React 컴포넌트다.

화면의 일부를 독립된 단위로 분리해두면 재사용과 유지보수가 쉬워진다.

🧠 왜 쓰는가?

• 반복되는 UI를 한 번만 정의할 수 있다.
• 화면 역할을 분리해서 읽기 쉬워진다.
• props를 통해 데이터를 받아 재사용할 수 있다.
• 구조가 커져도 관리하기 편하다.

🛠️ 기본 예시

function ListItem(props) {
  return (
    <div className="list-item">
      <h4>{props.subtitle}</h4>
      <p>{props.datestr}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <ListItem subtitle="여자 코드 추천" datestr="2월 17일 발행" />
      <ListItem subtitle="남자 코트 추천" datestr="2월 17일 발행" />
      <ListItem subtitle="남자 야구잠바 추천" datestr="2월 17일 발행" />
    </div>
  );
}

🔁 구조 분리 예시

• 목록 항목을 ListItem으로 분리하면 App은 데이터 배치에 집중할 수 있다.
• 스타일과 렌더링 책임도 더 분명해진다.

⚠️ 주의점

• 너무 작은 단위로 쪼개면 오히려 복잡해질 수 있다.
• 컴포넌트 이름은 역할이 드러나게 짓는 것이 좋다.
• props가 많아지면 상위 구조를 다시 점검한다.

📌 정리

• CustomComponent는 직접 만든 재사용 가능한 UI 단위다.
• 역할 분리와 재사용성 측면에서 중요하다.
• React-Component, React-Props, React-JSX와 함께 보면 좋다.

---

연결문서

• React-Component
• React-Props
• React-JSX
• React-Fragment