Style 부분 파일 분리

정서희·2022년 7월 6일
0

내가 기존에 작성하던 코드의 문제점은 컴포넌트는 분리를 했지만 style은 분리를 하지 않아서 코드가 다소 길어지는 상황이 많이 발생했다.

기존에 내가 코드를 하던 방식 (물론 실제로 이렇게 css를 하드코딩하지는 않지만... 그냥 예시! )

회사코드를 공개할 수 없어서 파일 분리하는 부분만 정리해보자면,

  1. 스타일을 저장할 파일에 이름이 style인 객체를 생성한다.
  2. 그 객체에 속성으로 스타일을 주려는 컴포넌트의 이름을 추가한다.
  3. style.속성에 인자로 props와 theme을 받는다
  4. style.속성에 스타일을 저장한다.
  5. export default 로 style을 내보낸다.
  6. 컴포넌트 파일에서 스타일 파일을 import한다.
  7. 컴포넌트 들에서 style = { <import 받은 스타일 변수>.이름 로 적용한다.

이렇게 하면 스타일을 컴포넌트 외부에서 import 받을 수 있다

profile
어제보단 오늘이 더 강한 웹/앱 개발자입니다

0개의 댓글