[React] Styled Component 파일 분리

Styled Component를 사용하여 스타일링을 하다보면 한 파일에서 엄청난 코드를 본 적이 있을 것이다.
그래서 컴포넌트 코드와 스타일링 코드를 분리하여 코드를 짜면 보기가 (내 기준에서) 훨씬 좋아진다.

named export 활용하여 컴포넌트가 있는 파일에 스타일링 코드를 불러오기

import * as S from './PinImgWrapperStyle';

const PinImgWrapper = ({ data }) => {
  return (
    <>
      <S.RelatedPin>관련된 핀 더보기</S.RelatedPin>
      <S.ImgWrapper>
        {data.map((item, idx) => {
          return (
            <S.PinItem key={idx}>
              <S.PinImg src={item.url} />
            </S.PinItem>
          );
        })}
      </S.ImgWrapper>
    </>
  );
};

import styled from 'styled-components';

export const RelatedPin = styled.h3`
  margin: 18px auto;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
`;

export const ImgWrapper = styled.div`
  margin: 0 auto;
  max-width: 1440px;
  column-count: 4;
  column-gap: 1em;
`;

export const PinItem = styled.article`
  display: inline-flex;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 24px;
  overflow: hidden;
`;

export const PinImg = styled.img`
  width: 100%;
  height: auto;
  object-fit: cover;
`;