[React] props.children 사용하기!!

react

VueJs에서 slot이 있었던 것처럼!!! React에는 props.children이 있다. 

간단한 예시를 보면, Layout.js이다.  

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

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

export default Layout;

{props.children}가 있는 main태그 속에 <Layout> </Layout>사이에 있는 코드들이 표시된다!! 

 

Layout을 사용한 App.js코드는 다음과 같다. 

import { Routes, Route } from 'react-router-dom'

import AllMeetupPage from './pages/AllMeetup';
import NewMeetupPage from './pages/NewMeetup';
import FavoritesPage from './pages/Favorites';
import Layout from './component/layout/Layout';


function App() {
  return (
    <Layout>
      <Routes>
        <Route path='/' element={<AllMeetupPage />} />
        <Route path='/new-meetup' element={<NewMeetupPage />} />
        <Route path='/favorites' element={<FavoritesPage />} />
      </Routes> 
    </Layout>
  );
}

export default App;

 

 

 

참고 :

https://developer-talk.tistory.com/226

[React]props.children 사용