children 활용하기

페이지를 만들 때 헤더나 풋터영역은 대부분 변화 없이 사용하는 경우가 많은데 그런 영역까지 리렌더링이 될 필요는 없기에 그 부분에서 children을 사용하면 된다.

전에 children을 설명하면서 썼던 예제를 보면서 이해해보자

function Layout(props) {
  return (
    <>{/* 전체를 묶는 최상위 태그가 하나 있어야해요*/}
    	<header>
     	 이건 모든 페이지에서 보일거에요.
    	</header>
    	{props.children} 
    </>
    
  )
}

다른컴포넌트
 <Layout 여기나> 여기에 들어간 값이 보일거에요</Layout>

원래 이렇게 사용해서 헤더를 고정으로 했었는데 이제는 리렌더링이 되지 않도록 해보려한다.

shared 폴더에 layout컴포넌트를 추가한 후

function Layout({ children }) {
  return (
    <div>
      <Header />  //헤더컴포넌트가 있다고치자
      <div style={{...layoutStyles}}>
        {children}
      </div>
      <Footer />  //풋터컴포넌트가 있다고치자
    </div>
  );
}

export default Layout;

Router.js에서 

import Layout from './Layout';

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

< BrowserRouter>와 <Routes> 사이에 layout을 넣어주면 된다. 

이렇게 된다면 layout 하위 태그들만 리렌더링이 될 수 있다.