ReactJS

[ Style ] TypeScript로 DefaultLayout 만들기

Eppo:) 2022. 10. 14. 02:51

< DefaultLayout.tsx > 파일 만들기 

import styled from "styled-components";

interface Props {
  children: React.ReactNode
}

const DefaultLayout: React.FC<Props> = (props: Props) =>{
return (
  <Wrap>
    {props.children}
  </Wrap>)
}
export default DefaultLayout;

const Wrap = styled.div`

`;

 

< DefaultLayout /> 적용하기 

import Router from "./Router";
import Header from "./component/common/Header";
import DefaultLayout from "./styles/DefaultLayout";

function App() {
  return (
    <DefaultLayout>
      <Header />
      <Router />
    </DefaultLayout>
  );
}

export default App;