[TIL] 2022년 01월 26일 TIL - LAYOUT

이번시간에는 전체적인 스타일을 꾸며주는 레이아웃을 제작하는 방식에대해 배워보았다.

커리큘럼

동일한 CSS를 사용하고 싶어요!! => Global Styles
폰트도 다양한것을 사용하고 싶어!! => WOFF2
슬라이더를 적용하고 싶다 -> Carousel

레이아웃 이란?

레이아웃은 UI에 전체적인 페이지를 구성하는 방식이라 할 수 있다.

기본적인 레이아웃 설정은 위 이미지와 같이 메뉴의 배치를 단계적으로 수행하는 작업이다.

function MyApp({ Component, pageProps }) {
 
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

React에서 레이아웃을 구성하는 방식은 대부분 _app.tsx에 가면 설정할수 있는 파일에 가보면 된다.

이 파일에서 Component는 모든 페이지를 실행하기 전 먼저 실행하는 설정 페이지이다.

설정페이지에서 들어오는 Component부분은 다음에 보여질 페이지다. 만약 BoardComponent를 보여줄려면

Component에는 BoardComponent가 들어오면 된다.

등록 페이지에서는 등록 컴포넌트만 보여주고 상세 페이지에서는 상세페이지만 보여줄수 있는 등록 & 상세 컴포넌트이다. 그 말인 즉슨 Compoent 전체를 감싸주어야만 레이아웃을 구성해줄 수 있다.

export default function Layout(props: IProps) {
   return (
     <> 
        <Header />
        <Banner />
        <Navigation />
        <Body>{props.children}</Body>
     </>
)
}

먼저 Layout을 구성한 파일을 생성후 레이아웃을 배치시켜준다. 그리고 props를 받아와 children객체로 Compoenet를

제어해주면 된다.

그러면 Layout컴포넌트에는 껍데기가 있고 그 안에 Header 컴포넌트와 Banner 컴포넌트가 있다.

props.children

// props - 수동
<BoardWrite isEdit={true}/>

// props = (자동)
<BoardWrite isEdit={true}> // 우리가 지은 이름 
  <div></div> // props.children // 우리가 바꿀 수 있는 것이 아닌 자동으로 등록된 요소
</BoardWrite>

만약에 BoardWrite페이지에 props값으로 isEdit를 주면 그 아래 div태그에는 자식 요소로 props.children값이 들어간다.

이곳은 우리가 바꿀 수 있는 것이 아닌 자동으로 등록된 요소이다.

function MyApp({ Component, pageProps }) {
 
  return (
    <LayOut> // isEdit도 줄 수 있다. 
      <Component {...pageProps} /> // props.children = 컴포넌트 전체 
    </LayOut>
  );
}

// Layout.tsx
export default function Layout(props: IProps) {
   return (
     <> 
        <Header />
        <Banner />
        <Navigation />
        <Body>{props.children}</Body>
     </>
)
}

주소를 바꿀때 빨간색 영역 부분에 자식객체를 받아와줌

각각 영역이 잡혀있는 layout 폴더구성

Global Style 이란?

Global Style은 React와 Styled Compoents로 웹 개발을 하다보면 대부분의 경우 컴포넌트 단위로 개발을 하는경우가 많다. 하지만 이렇게 styled를 잡다보면 한번씩 초기화 시켜야 하는 스타일을 나눌 필요가 있다.

그것을 Global Style을 이용해서 스타일링을 해주면 간단한 초기화 css를 구성해줄 수 있을 것이다.

import { Global } from '@emotion/react';

global Style은 먼저 emotion에 라이브러리에서 받아올 수 있다. App.tsx 파일에서 선언해주면 되는데

   <ApolloProvider client={client}>
            <Global styles={globalStyles} />
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </ApolloProvider>

이런 식으로 Component를 자식객체로 감싸주어서 Global을 선언해주면 된다.

import { css } from '@emotion/react';

export const globalStyles = css`
    background: red;

    * {
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        // 자식이 제어하고 있으면 안먹힘

        font-size: 20px;
        font-family: 'aaa';
    }

    @font-face {
        font-family: aaa;
        src: url(/fonts/scifibit.ttf);
    }
`;

기존에 css에서 초기화를 선언해주는 방식에서 GlobalStyles라는 변수에 css초기화를 구성해줄 수 있다.

'etc. > TIL' 카테고리의 다른 글

[TIL] 2022년 02월 03일 TIL - 클래스 컴포넌트 (0)	2022.02.03
[TIL] 2022년 01월-25일 TIL - Ant Disgin Modal, Husky (0)	2022.01.25
[TIL] 2022년 01월 24일 TIL - Event Bubbling (0)	2022.01.24

커리큘럼

레이아웃 이란?

props.children

Global Style 이란?

'etc. > TIL' 카테고리의 다른 글

티스토리툴바