React에서 children 사용법: 컴포넌트 확장성을 높이는 방법

처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.

const CardBasic = ({ title, description }: { title: string, description: string }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
};

이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.

---

하지만, 확장성 문제

프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐 수도 있겠다는 생각이 들었습니다. 사용자는 텍스트뿐만 아니라 이미지, 리스트, 버튼 등의 다양한 요소를 카드 안에 추가하고 싶어할 수 있을 텐데, 문자열만 받는 방식으로는 확장성이 부족하다는 문제에 생각했습니다. 이럴 경우, 매번 컴포넌트를 수정해야 하는 번거로움이 생길 수 있기 때문입니다.

특히, 프론트엔드 개발에서 중요한 건 유연성과 재사용성인데, 이렇게 제한된 방식은 장기적으로 문제가 될 수 있다는 걸 깨달았어요.

---

해결책-> React의 children 발견

확장성을 고민하던 중, 구글링을 통해 React의 children이라는 개념을 접하게 되었습니다. children은 컴포넌트 내에서 무엇이든 받을 수 있는 속성으로, 텍스트, 이미지, 다른 컴포넌트까지도 포함할 수 있죠. 이 속성을 사용하면 사용자가 원하는 다양한 콘텐츠를 컴포넌트 안에 넣을 수 있습니다.

이 방식은 카드 컴포넌트를 훨씬 더 유연하게 만들 수 있었습니다. 예를 들어, 카드 안에 텍스트뿐만 아니라 이미지나 버튼 등을 자유롭게 추가할 수 있게 된 거죠.

interface BasicCard {
  title: string;
  children?: React.ReactNode;
}

const CardBasic = ({ title, children }: BasicCard) => {
  return (
    <div className="m-4 max-w-sm rounded-xl border-2 border-Blue bg-white shadow-lg dark:bg-[#2A2E39] dark:text-white">
      <div className="px-6 py-4">
        <div className="mb-2 text-2xl font-bold dark:text-white">{title}</div>
        <div className="text-base text-slate-700">{children}</div>
      </div>
    </div>
  );
};

children을 사용하면 다음과 같이 다양한 요소를 카드 안에 포함시킬 수 있습니다.

<CardBasic title="Example Card">
  <p>This is an example description with <strong>bold</strong> text.</p>
  <button>Click Me</button>
</CardBasic>

---

children의 원리

React의 children은 컴포넌트 내부에서 렌더링할 내용을 동적으로 받을 수 있는 속성입니다. 기본적으로 children은 ReactNode 타입으로, 텍스트, 이미지, HTML 요소, 또는 다른 React 컴포넌트까지도 렌더링할 수 있게 합니다. 이 방식은 컴포넌트를 더 유연하게 사용할 수 있게 만들어줍니다.

이를 통해 사용자에게 더 유연한 컴포넌트 사용 방식을 제공할 수 있었습니다. 특히, 다양한 UI 요소를 카드 안에 쉽게 추가할 수 있다는 점에서 확장성과 재사용성 측면에서 매우 큰 장점을 가지게 되었습니다.

---

마무리. 확장성을 고려한 컴포넌트 설계의 중요성

이 과정에서 가장 큰 배움은 초기 설계 시 확장성을 항상 염두에 둬야 한다는 것이었습니다. 처음에는 단순하게 텍스트만 받아서 출력하는 방식으로 시작했지만, 컴포넌트를 사용할 사용자의 다양한 요구를 고려해 더 유연하고 확장 가능한 방식으로 개선할 필요가 있었습니다. children을 사용함으로써 이러한 문제를 해결하고, 유연한 컴포넌트 설계의 중요성을 다시 한 번 느낄 수 있었습니다.