📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4

📜 Chapter

React.ReactNode

React.ReactChild

React.ReactElement

React.createElement

children

• children

• A component 사이에 B component가 있을 때, A component에서 B component 내용을 보여주려고 사용하는 prop이다.

• React의 강력한 합성(Composition) 모델을 구현하기 위해서는 children prop을 사용한다.

• 예시 1

  export default function Alert ({children}) {
    return (
      <AlertRoot>
        ...
        <AlertMessage>
          {children}
        </AlertMessage>
      </AlertRoot>
    ):
  }
  

• 예시 2

  interface Props {
    children: React.ReactNode
  }
  

• 예시 3

  import classes from "./Card.module.css";
  interface Props {
    children: React.ReactNode;
  }
  function Card(props: Props) {
    return <div className={classes.card}>{props.children}</div>;
  }
  
  export default Card;
  

children - 타입 선언 방법

• 참고 자료 1

1. 직접 children에 대한 타입을 선언