• 목차

개요

• children prop 은 모든 컴포넌트가 기본으로 가지고 있는 prop 이다.
• children prop 은 오프닝과 클로징 태그 사이의 JSX 콘텐츠를 가진다.
• 이것은 리액트 컴포넌트로 사용자 인터페이스(UI) 를 만들 때 사용한다.
• src/components/ui : children prop 를 이용한 wrapper 컴포넌트 저장

Card.js

import classes from './Card.module.css'

function Card(props) {
    return (
      <div className={classes.card}>
          {props.children}
      </div>
    );
}

export default Card;

• Card wrapper 컴포넌트는 JSX 콘텐츠(props.children)에 card CSS Class 를 적용 시켜준다.

MeetupItem.js

import classes from './MeetupItem.module.css'
import Card from "../ui/Card";

function MeetupItem(props) {
    return(
      <li className={classes.item}>
          <Card>
              <div className={classes.image}>
                  <img src={props.image} alt={props.title}/>
              </div>
              <div className={classes.content}>
                  <h3>{props.title}</h3>
                  <address>{props.address}</address>
                  <p>{props.description}</p>
              </div>
              <div className={classes.actions}>
                  <button>To Favorites</button>
              </div>
          </Card>
      </li>
    );
}

export default MeetupItem;

• Card JSX elemnet 로 감싼 JSX 콘텐츠는 Card 컴포넌트에서 children prop 으로 받을 수 있다.

Layout.js

• 이 방법을 이용하여 콘텐츠 주변에 흰 여백을 좀 더 넣어보자.

import classes from './Layout.module.css'
import MainNavigation from "./MainNavigation";

function Layout(props) {
    return (
      <div>
          <MainNavigation />
          <main className={classes.main}>
              {props.children}
          </main>
      </div>
    );
}

export default Layout;

App.js

import {Route, Switch} from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupsPage from "./pages/NewMeetup";
import FavoritesPage from "./pages/Favorites";
import Layout from "./component/layout/Layout";

function App() {
  return (
      <div>
          <Layout>
              <Switch>
                <Route path={'/'} exact={true}>
                  <AllMeetupsPage />
                </Route>
                <Route path={'/new-meetup'}>
                  <NewMeetupsPage />
                </Route>
                <Route path={'/favorites'}>
                  <FavoritesPage />
                </Route>
              </Switch>
          </Layout>
      </div>
  );
}

export default App;

• Layout JSX elemnet 로 감싼 JSX 콘텐츠는 Layout 컴포넌트에서 children prop 으로 받을 수 있다.
• Layout JSX elemnet 로 감싼 JSX 콘텐츠에 main CSS Class 가 적용된 것을 볼 수 있다.