StyledComponent를 사용하며 길어진 import..

IntHyun·2023년 5월 27일
0
post-thumbnail

StyledComponent를 사용하면서 한 파일에서 스타일을 관리하고자 하니 한 파일의 코드가 불필요하게 길어지는 것 같아서 Styled 파일을 따로 분리하여 사용하고 있습니다.

위와 같이 SignupStyle.jsx에 스타일 코드를 한 번에 모아서 관리하고 있는데 StyledComponent들이 많아지면 많아질수록 Signup.jsx파일에 import할 코드들이 너무 많아지는게 문제였습니다.

import {
  StyledSignupForm,
  StyledSigunupIdWrapperDiv,
  StyledCheckIdText,
  StyledCheckPwText,
  StyledSignupIdInput,
  StyledSignupPwInput,
  StyledSignupPwCheckInput,
  StyledSignupNameCheckInput,
  StyledSignupPHInput,
  StyledSignupEmailInput,
  StyledSignupCommonLabel,
  StyledSignupIdCheckBtn,
  StyledSignupFiledset,
  StyledSignupIdLabel,
  StyledPwWrapperDiv,
  StyledCheckImg,
  StyledCheckImgOff,
  StyledPHWrapperDiv,
  StyledEmailWrapperDiv,
  StyledEtcSpan,
  StyledArrowBtnForDiv,
  StyledArrowBtn,
  StyledPHListUl,
  StyledPHListLi,
  StyledPHSelectBtn,
} from "./SignupStyle";

기존에는 코드가 이런식으로 들어가니 너무 지저분하게 느껴져 이를 해결하기 위해 같이 공부하는 지인분께 여쭤봤더니

import * as S from "./SignupStyle";

위와 같이 사용을 하면 "./SignupStyle" 에서 export되어진(export default는 X) 모든 component들을 S (내가 지정한 이름) 라는 객체에 담아 import 해온다는 것입니다.
그래서 가져온 저 객체를 콘솔창에 출력해보니

위와 같이 객체에 담겨져 내가 export한 모든 component들이 담겨져 들어온 것을 확인할 수 있었습니다.

이로써 더이상 component의 이름이 아닌 S.CheckImgOff와 같이 접근할 수 있게 되었고

위에서 보이는 사진과 같이 굉장히 많은 import들이 사라진 것을 확인할 수 있습니다!

해당 파일에 존재하는 모든 export들을 하나의 객체안에 담아 관리하므로 사용하기 편리하다.

profile
기록용으로 벨로그를 작성합니다.

0개의 댓글