React Props와 Children 속성 / Layout 설정

Q. Children도 Props인가?

- children도 React에서 사용하는 props 중 하나다. children은 컴포넌트가 다른 컴포넌트를 "자식"으로 포함할 때 사용되는 특별한 prop이다. 이를 통해 부모 컴포넌트는 자식 컴포넌트를 자유롭게 구성하고 재사용할 수 있다.

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

여기서 ParentComponent는 children prop을 사용해 자신이 감싸고 있는 모든 자식 요소들을 렌더링한다. 그리고 이 컴포넌트를 아래와 같이 사용할 수 있다.

<ParentComponent>
  <p>이것은 첫 번째 자식 요소입니다.</p>
  <p>이것은 두 번째 자식 요소입니다.</p>
</ParentComponent>

이 경우, ParentComponent 내부의 props.children은 두 개의 <p>태그를 포함한다. 이렇게 children prop을 사용하면 컴포넌트의 재사용성과 유연성을 높일 수 있다.

 

Q. 그렇다면 "props는 children이다."라는 말도 성립이 되는가?

- "props는 children이다."라는 말은 정확하지 않다. props(속성): props는 React 컴포넌트에 전달되는 입력 값들을 의미한다. 컴포넌트를 사용할 때, 태그의 속성처럼 전달되는 모든 값들이 props에 포함된다. 예를 들어, <MyComponent color={blue} size="10" />에서 color와 size는 MyComponent의 props에 포함되는 속성들이다.

React에서 프롭스를 전달할 때 중괄호 {} 또는 큰따옴표 ""를 사용할 수있으며, 데이터의 타입과 사용 방식에 따라 선택할 수 있다.

위 예시에서 size가 문자열로 전달되므로 자식컴포넌트 내부에서 숫자로 사용하려면 필요한 형변환 작업을 해야 할 수 있다.

- children: children은 props의 특별한 속성 중 하나로, 부모 컴포넌트 사이에 위치한 모든 JSX 요소나 컴포넌트를 나타낸다. 예를 들어, <Parent><Child /></Parent>에서 <Child />는 Parent 컴포넌트의 children prop으로 전달된다.

children은 props의 일부분이지만, 모든 props가 children이라고는 할 수 없다. props는 children을 포함한 다양한 데이터와 설정을 컴포넌트에 전달하는 방법이다.

 

Layout

 이미 여러 프로젝트에서 Layout을 만들 때 위와 같은 방법으로 children을 활용했다.

 

children prop은 React에서 레이아웃이나 다른 컴포넌트 구조를 만들 때 자주 사용되는 방법 중 하나다. children을 사용하면, 한 컴포넌트 안에 다른 컴포넌트나 HTML 요소들을 넣을 수 있어서, 레이아웃을 만들거나, 컴포넌트를 재사용하는 데 유용한 방법이다.

 

레이아웃 컴포넌트를 만들 때, children prop을 사용해 내부에 다양한 내용을 삽입하여, 같은 레이아웃을 가진 다양한 페이지를 쉽게 만들 수 있다. (헤더나 푸터 등의 고정된 구조)

const Layout = (props) => {
  return (
    <div className="layout">
      <header>헤더 영역</header>
      <main>{props.children}</main>
      <footer>푸터 영역</footer>
    </div>
  );
};

이 Layout 컴포넌트는 아래와 같이 사용할 수 있다.

<Layout> <p>이 페이지의 주요 내용입니다.</p> </Layout>

Layout 컴포넌트 내의 <main> 태그 안에 <p>이 페이지의 주요 내용입니다.</p>가 들어간다.

이런식으로 동일한 레이아웃을 가진 여러 페이지에서 이 Layout 컴포넌트를 재사용할 수 있다.