자식 컴포넌트 사용.

React

sdafdq 2023. 10. 26. 15:26

그러니까,

<Footer><ChildComp></ChildComp></Footer>

이렇게.

Footer도 내가 만든 컴포넌트고, ChildComp도 그런데,

저렇게 넣을 경우 저 ChildComp에 접근하는 방법.

일단은 결국 props로 다 관리한다.

쟤는 props.children 해서 관리할 수 있다.

참고로 저기에,

<Footer>    <ChildComp>   </ChildComp>    </Footer>

이렇게 하면 props.children이 배열로 들어오는데,

' '

ChildComp

' '

이렇게 들어온다.

컴포넌트 단위로 단위가 나눠지는 모양이다.

<Footer>    <ChildComp>    </ChildComp>   <ChildComp>    </ChildComp>    asdfsda     dsafasdf    </Footer>

이렇게 하면 컴포넌트 단위로 나눠진다.

' '

ChildComp

' '

ChildComp

' asdfsda dsafasdf '

이렇게 된다.

그러므로 공백 생각하라.

그러므로, 저렇게 위에서 넣어준 자식 컴포넌트를 사용하고 싶으면,

function Footer(props) {
  console.log(props.children);
  return (
    <footer>
      {props.children}
    </footer>
  );
}

그냥 저렇게 쓰면 된다.

이렇게 줬을 때,

이렇게 나온다.

qwef