Written by Nostrss
on December 10, 2022

[월간코딩] #2 Side Bar 만들기

1. Layout 만들기

Layout의 구성

Header : 화면의 최상단에 위치하는 영역. 보통 로고, nav등이 위치한다. Nav는 따로 빼기도 한다.
Footer : 화면의 최하단에 위치한다. 보통 회사 정보등이 위치한다.
Side Bar : Nav와 비슷하다. 하지만 일반적으로 Main 좌우에 세로로 위치한다.
Main : 유저에게 현재 페이지의 기능을 제공할 영역

Layout 코드

import React from 'react';
import SideBar from './sidebar/sidebar.container';
import styled from 'styled-components';

interface IProps {
  children: React.ReactElement;
}

export const WrapperRow = styled.div`
  display: flex;
  flex-direction: row;
`;

export default function Layout({ children }: IProps) {
  return (
    <>
      <header>header</header>
      <WrapperRow>
        <SideBar />
        <main>{children}</main>
      </WrapperRow>
      <footer>footer</footer>
    </>
  );
}

주의 : Props로 ReactElement를 받도록 해야한다.

2. 사이드 바 만들기

aside 태그와 styled-components를 사용했다.

사이드 바 CSS

import styled from 'styled-components';

export const LayoutSidebar = styled.aside`
  width: 200px;
  height: 100vh;
  position: sticky;
  overflow: auto;
  background-color: #f8f9fa;
`;

height: 100vh; : 페이지 길이 만큼 사이드 바가 보이게 하기 위해서 설정했다. 만약 헤더와 푸터가 있다면 그 둘의 height 만큼 100vh에서 빼줘야 한다.
position: sticky; : 스크롤 하더라도 사이드바의 메모리스트는 그대로 보이게 하기 위해 설정
overflow: auto; : 메모리스트가 너무 많을 경우에는 사이드바 내부에 스크롤이 생기게 하기 위해 설정

3. Layout 으로 감싸주기

index.tsx파일에서 App을 통째로 감싸주면 끝!

root.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Layout>
        <App />
      </Layout>
    </ThemeProvider>
  </React.StrictMode>
);

← → Top