본캠프 13일차 - props.children

오늘은 props.children에 대해 포스팅 해보려고 한다.

  props.children  

props.children을 이해하기 위해선 먼저 props에 대해 알아야한다.

props에 대한 자세한 설명은 https://jaytech-fe.tistory.com/37 에서 확인할 수 있다.

다시한번 간단하게 설명하자면

보통은 container-presenter 관계에서 사용되며, container에서 presenter로 데이터를 넘겨주기 위해 사용된다.

container에서 사용된 변수, 함수등을 return값인 presenter 안에 표기해주면 presenter의 함수에서 props를 인자로받아

props.xxxx 으로 사용할 수 있다.

 

props.children이란 props와 비슷하게 사용되며, 부모 컴포넌트에서 자식 컴포넌트의 내용을 보여주고싶을 때 사용한다.

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props 라고 볼 수 있다.

예시는 아래와 같다.

 

const qqq = (props) => {
  return <div>{props.children}</div>;
};

 

이 처럼 상위에 위치하게될 qqq라는 컴포넌트 안에 {props.children}을 선언 해 주고,

const App = () => (
  <qqq>
    <div> qqq테스트 </div>
  </qqq>
);

 React를 사용할 때 App  컴포넌트가 최상위에 위치하게되는데 App안에 qqq라는 컴포넌트를 작성하고, 그 안에 내용을 입력하게 되면 qqq테스트란 글자가 출력되게 된다.

이렇듯 props.children이란 상위의 컴포넌트에서 해당 컴포넌트안에있는 하위 컴포넌트 내용을 보여주고싶을 때 사용하게되며 보통 layout구조에서 사용하여 모든 페이지에 layout을 적용시키고 각 페이지를 노출 시킬 수 있게 한다.