합성 Component

합성 Component란?

여러 개의 Component를 조합하여 새로운 Component를 만드는 것을 의미
합성 Component를 만들 시, 기존의 Component를 조합하거나 확장해서 사용

import styled from "styled-components";

const CardDiv = styled.div`
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #c4c4c4;
  margin-bottom: 20px;
  width: ${(props) => (props.data.includes("챌린지") ? "200px" : "400px")};
`;

function Title({ title }) {
  return (
    <>
      <h2>{title}</h2>
      <hr />
    </>
  );
}

function MakeBtn(props) {
  return (
    <div>
      {props.array.map((e, i) => (
        <button key={i}>{e}</button>
      ))}
    </div>
  );
}

function Challenge(props) {
  let arr = ["초기화", "저장하기"];
  return (
    <CardDiv data={props.name}>
      <Title title={props.name}></Title>
      <MakeBtn array={arr}></MakeBtn>
    </CardDiv>
  );
}

function Service(props) {
  let arr = ["이미지 저장", "트위터", "페이스북"];
  return (
    <CardDiv data={props.name}>
      <Title title={props.name}></Title>
      <p>안녕하세요</p>
      <MakeBtn array={arr}></MakeBtn>
    </CardDiv>
  );
}

function App() {
  return (
    <>
      <Challenge name="챌린지 설정"></Challenge>
      <Service name="서비스 공유하기"></Service>
    </>
  );
}

export default App;

note

위의 코드는 이미지와 같은 결과이다.
Service Component와 Challenge의 Component는 비슷한 구조를 띄고 있다.
props를 이용하여 표현하고자 하는 제목을 전달하고 있으며, 각 Component안에서 CardDiv 스타일 Component를 호출한다.
CardDiv Component에서도 각각 Title Component와 MakeBtn Component를 호출하여 표현하고자 하는 요소를 동적으로 생성후 반환하였다.

이와 같이 중복된 요소 및 Component를 관리하여 재사용성과 유지보수 측면을 향상 시켰다.
이를 합성 Component라고 한다.

합성 Component란?​

합성 Component란?