HYEWON JUNG의 개발일지
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 하위 태그들만 리렌더링이 될 수 있다.
'React' 카테고리의 다른 글
redux toolkit (1) | 2023.11.28 |
---|---|
React router dom (0) | 2023.11.13 |
redux payload, Ducks (1) | 2023.11.12 |
Redux (0) | 2023.11.10 |
component LifeCycle 생명주기 (1) | 2023.11.09 |