TIL[13일차].레이아웃 구조, 폰트 설정

남예지·2022년 11월 16일

TIL

목록 보기

9/47

시작하면서 멘토님께서 주니어 개발자 시절 프로젝트 구조를 잡는데 힘들었던 얘기를 해주었다.
구조를 잡을때 뭐부터 해야하는지 몰랐는데 알고보니 레이아웃을 이용해서 메뉴 등 고정은 하나만 만들고, 만든 페이지를 부품처럼 넣으면 편하더라는걸 알았다고 한다.
그래서 나중에 사이드 프로젝트를 위해 오늘 레이아웃을 더 집중해서 들으려 노력했다.

오늘 목차는 UI 의 전체적인 구조를 layout으로 잡고, 글로벌 스타일로 css를 전체 적용하는 방법을 배웠다.

그 전에 포트폴리오 리뷰

vscode에서 속성 등에 마우스를 올렸을때 @deprecated가 뜬다면 앞으로 업데이트가 없으니 가급적이면 쓰지마세요. 라는 뜻이다.
input - readOnly는 '입력 안되는 창' 설정 속성이다.
value와 defaultValue가 같이 있다면 value가 우선시된다.
그래서 value 에 || 연산자를 이용해서 앞에게 거짓이면(빈 값이면) 뒤에거 보여줘 라고 해줘야한다.
value={props.zipcode || (props.data?.fetchBoard.boardAddress?.zipcode?? "")}
value값이 없으면 기존 입력값을 가져오고 이것도 없으면 빈값을 보여줘. 라는 뜻이다.

props.children

보임과 동시에 자식이 프롭스로 BoardWrite에 들어갈 수 있다.
props.children 이라는 이름으로 자동으로 들어간다.

props.children으로 input을 받는걸 볼 수 있다.

Example이 레이아웃이다. 영희부분은 배너, 맹구부분은 footer로 고정하고, 안쪽은 게시등 등록 등 바뀌는 것을 넣어준다.

정리하면 이렇다.

그럼 실습으로 app.tsx에 layout을 연결해보자

먼저 레이아웃 폴더를 하나 만들어야한다.
src/components/commons/layout/index.tsx 파일에 만들어주겠다.

exprot default function Layout(props){
	return(
    	<>
        	<div>여기는 헤더</div>
        	<div>여기는 배너</div>
        	<div>여기는 네비</div>
        	<div>{props.children}</div>
        </>
    )
}

이렇게 해준뒤 app.tsx 파일에 가서 component를 Layout으로 감싸준다.

        <Layout>
          <Component />
        </Layout>

Layout import시 atnd로 하면 안되고 src/components/commons/layout/index.tsx 여기로 import 해야한다.

이러면 어느 페이지를 들어가더라도 여기는 헤더 ...여기는 네비 가 고정적으로 뜬다.

이제는 헤더, 배너, 네비를 각각 컴포넌트로 만들어주자

푸터까지 4개를 각각 만든다음 Layout 함수에 넣는다.

import LayoutBanner from "./banner";
import LayoutFooter from "./footer";
import LayoutHeader from "./header";
import LayoutNavigation from "./navigation";

interface ILayoutProps {
  children: JSX.Element;
}
export default function Layout(props: ILayoutProps) {
  return (
    <>
      <LayoutHeader />
      <LayoutBanner />
      <LayoutNavigation />
      <div>{props.children}</div>
      <LayoutFooter />
    </>
  );
}