[React] styled-component 파일 분리하기

applejin·2022년 10월 21일
0

React

목록 보기
3/3
post-thumbnail

styled-component 파일 생성

styled-component를 사용하는 프로젝트를 진행하던 중 각 컴포넌트 안에서 작성하는게 지저분해 보여서 분리하기로 했다.

HeaderStyle.ts

src/styles/HeaderStyle.ts 경로에 만들었다.

  1. styled를 import 한다.
  2. css를 작성한다.
  3. styledComponents = { 위에서 만든 변수들 }; 변수를 생성한다.
  4. styledComponents를 export 한다.

Header.tsx

  1. export 했던 styledComponents를 import 해준다.
  2. styledComponents 내에 변수들을 가져온다.

아쥬아쥬 간단하다!!
한 곳에 다 작성했을 때 보다 훨씬 깔끔해졌다!

👉🏽 참고

profile
front-end developer

0개의 댓글