Next 프로젝트에서 styled-components 코드 분리하기

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2022년 3월

배경

• 편리한 코드 유지보수를 위해 기존에 한 JS 파일에 함께 작성된 모든 styled-components 관련 코드들에 대해서 분리 작업을 진행함.

실제 예시

• 기존에 한 JS 파일에 함께 있던 모든 스타일 코드를 별도의 파일로 분리함.
• styled-components 분리 파일

  import styled from 'styled-components';
   ...
  export const VideoUpperContainer = styled(FlexBox)`
    flex-direction: column;
    @media screen and (min-width: 769px) {
      width: 55.833vw;
      max-width: 1072px;
    }
  `;
  ...

• JS 파일에서 스타일 컴포넌트 import 하여 적용

  import * as S from '../../component/pageStyled/ClipIdStyled';
  ...
  <S.VideoUpperContainer>
  ...
  </S.VideoUpperContainer>

긍정적인 팀원 반응

배우고 느낀 점

• 모든 스타일 코드를 분리하느라 시간 많이 걸렸음.
• 하지만 기존에 스타일 코드들로 인해 파일 내 코드가 길어져서 코드 보기가 힘들었었는데, 훨씬 보기 편해졌고 팀원들 반응도 긍정적이어서 뿌듯했다.
• 보다 효율적인 방안, 가독성 좋은 방안에 대해 고민하는 것은 반드시 필요하기 때문에 앞으로도 이런 고민과 공부, 연습을 열심히 해야겠다.