스타일드 컴포넌트, S 객체로 묶어서 관리하기

위코드에서 공부하며 정리한 내용입니다.

스타일드 컴포넌트를 사용할 때 S 객체로 묶어서 사용하면 const 로 각 스타일드를 매번 선언하고 할당하지 않아도 됩니다. 우선 S 객체를 사용하지 않고 선언해서 사용하는 방법을 보면,

return (
<>
  <MypageHeaderWrap>
    <MypageHeader>
      <PageHeader userInfoArr={userInfo.info} />
    </MypageHeader>
  </MypageHeaderWrap>
  <MypageBodyWrap>
    <MypageBody>
      <PageBody
        userInfoArr={userInfo.info}
        userQueArr={userInfo.question}
      />
    </MypageBody>
  </MypageBodyWrap>
</>
);

// 스타일드 컴포넌트

const MypageHeaderWrap = styled.div`
  padding-top: 10px;
`;

const MypageBodyWrap = styled.div`
  background: #efefef;
`;

const MypageHeader = styled.div`
  width: 1000px;
  padding: 70px 0;
  margin: 0 auto;
`;

const MypageBody = styled.div`
  width: 1000px;
  margin: 0 auto;
  padding: 70px 0;
`;

이때 컴포넌트 앞에 S. 을 붙이고(스타일드 컴포넌트라서 S 를 붙이는게 어느정도 컨벤션임) 각 스타일들을 S 객체로 묶으면 아래처럼 정리할 수 있습니다 .

return (
<>
  <S.MypageHeaderWrap>
    <S.MypageHeader>
      <PageHeader userInfoArr={userInfo.info} />
    </S.MypageHeader>
  </S.MypageHeaderWrap>
  <S.MypageBodyWrap>
    <S.MypageBody>
      <PageBody
        userInfoArr={userInfo.info}
        userQueArr={userInfo.question}
      />
    </S.MypageBody>
  </S.MypageBodyWrap>
</>
);

// 스타일드 컴포넌트

const S = {
  MypageHeaderWrap: styled.div`
    padding-top: 10px;
  `,
  MypageBodyWrap: styled.div`
    background: #efefef;
  `,
  MypageHeader: styled.div`
    width: 1000px;
    padding: 70px 0;
    margin: 0 auto;
  `,
  MypageBody: styled.div`
    width: 1000px;
    margin: 0 auto;
    padding: 70px 0;
  `,
};