리액트 공부하기 - children

 

 

children은 React 컴포넌트에서 컴포넌트 태그 안에 들어가는 자식 요소들을 전달받을 수 있게 해주는 특별한 prop.

(* 고정 문법은 아니지만, 리액트에서 특별하게 처리하는 props이름으로써, 다른 데이터 변수명으로 사용하는건 삼가해야함* )

 

 

👩🏻‍💻기본 사용법

function MyBox({ children }) {
  return (
    <div style={{ border: '1px solid black', padding: '10px' }}>
      {children}
    </div>
  );
}

// 사용 예시
function App() {
  return (
    <MyBox>
      <p>Hello, world!</p>
      <button>Click me</button>
    </MyBox>
  );
}

 

• MyBox 컴포넌트는 children prop을 받아 <div> 안에 넣습니다.
• App에서 <MyBox> 태그 안에 들어간 <p>와 <button> 요소들이 children으로 전달됩니다.
• → <p>Hello, world!</p> <button>Click me</button> 여기에 div 스타일을 적용하고 싶어서 저렇게 children 적용을 한 것

 

타입스크립트에서 사용법

type MyBoxProps = {
  children: React.ReactNode;
};

function MyBox({ children }: MyBoxProps) {
  return <div>{children}</div>;
}

React.ReactNode는 JSX로 넣을 수 있는 거의 모든 타입 (string, number, JSX, null, undefined 등)을 포함합니다.

 

children을 다른 위치나 조건에 따라 사용할 수도 있음

function FancyBox({ children }) {
  return (
    <div className="fancy">
      <header>📦 Fancy Box</header>
      <main>{children}</main>
      <footer>🧾 Footer</footer>
    </div>
  );
}

 

 

children이 없는 경우 기본값 지정도 가능

function GreetingBox({ children = "Hello there!" }) {
  return <div>{children}</div>;
}