children

props는 값을 내려주는 건데, 칠드런은 뭐하는 놈인가..

props만 있으면 되는거 아닌가? 라고 생각을 했다.

 

말그대로 자식이라 생각하면 편하다.

 

app.tsx내에서 ,

 

props는 내려주면

<컴포넌트 props={props}/>   이렇게 썼다.

 

children은

<컴포넌트> (자식) </컴포넌트> 

 

이 사이에 있는 자식이 !

(자식) = 어떤 것이던 다 해당 컴포넌트로 내려준다는 거다.

 

예제를 보겠다.

//Container.tsx (Children 컴포넌트)

import { ReactNode } from "react";

interface TChildren {
  children: ReactNode;
  id: string;
}

export default function Container({ children, id }: TChildren) {
  return (
    <>
      <div>{id}</div>
      <div>{children}</div>
    </>
  );
}

 

 

id를 :"하이" 라는 값으로 내려줬고 그 밑에 {children}을 넣었다.

Props로 내려준 {children}은 ,

// App.tsx

function App() {
  const [myId, setMyId] = useState("하이");
  return (
    <>
      <div className="border border-red-300">
        <Container id={myId}>
          <div className="border border-gray-300">안녕 칠드런 실험중임</div>
        </Container>
      </div>
    </>
  );
}

export default App;

 

 

 

참고로,

children의 타입은 ReactNode다. (대부분)