[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 8 'home.tsx'

home.tsx

import { styled } from "styled-components";
import PostTweetForm from "../component/post-tweet-form";
import Timeline from "../component/timeline";

// Wrapper 컴포넌트를 정의합니다.
// display를 grid로 설정하여 요소들을 격자 형태로 배치하고,
// gap 속성을 사용해 요소 간의 간격을 50px로 설정합니다.
// overflow-y 속성을 scroll로 설정하여 수직 스크롤이 가능하게 하고,
// grid-template-rows 속성을 사용해 행의 비율을 설정합니다.
const Wrapper = styled.div`
  display: grid;
  gap: 50px;
  overflow-y: scroll;
  grid-template-rows: 1fr 5fr;
  overflow: hidden;
`;

// Home 컴포넌트는 Wrapper 컴포넌트를 사용하여 PostTweetForm과 Timeline 컴포넌트를 감싸서 렌더링합니다.
export default function Home() {
  return (
    <Wrapper>
      <PostTweetForm />
      <Timeline />
    </Wrapper>
  );
}

 

이 코드는 Home 컴포넌트를 정의하고, styled-components 라이브러리를 사용해 스타일을 지정합니다.

• Wrapper는 styled.div를 사용해 스타일을 정의한 컴포넌트입니다.
  • display: grid: 요소들을 격자 형태로 배치합니다.
  • gap: 50px: 요소 간의 간격을 50px로 설정합니다.
  • overflow-y: scroll: 수직 스크롤을 가능하게 합니다.
  • grid-template-rows: 1fr 5fr: 행의 비율을 설정합니다.
• Home 컴포넌트는 PostTweetForm과 Timeline 컴포넌트를 Wrapper 안에 배치하여 렌더링합니다.

Q. fr 단위

 

CSS Grid 레이아웃에서 fr 단위는 "fraction"의 줄임말로, 그리드 컨테이너의 가용 공간을 비율로 나누는 데 사용됩니다. fr 단위는 유연한 길이를 나타내며, 그리드 항목이 차지할 공간을 상대적인 비율로 정의합니다.

기본 개념

• fr 단위: 그리드 컨테이너의 남은 공간을 나누는 비율을 나타냅니다. 1fr은 그리드 컨테이너의 남은 공간 중 1 단위를 의미합니다.
• 사용 용도: fr 단위는 주로 grid-template-columns와 grid-template-rows 속성에서 사용됩니다.