Theme.ts

css 로 styled -component 를 사용하면 공통적인 css 또는 반복적일거라고 예상되는 css 는 미리 정의해두고 사용할 수 있다.

 

theme.ts 를 활용하는건데,

 

보통 postcss sass 후처리/전처리 css 나 부트스트랩, 차크라, 테일윈드 같은 css 라이브러리도 많이 사용할텐데

 

저같은 경우에는 위에 나열한 css 를 많이 사용해본것도 아니지만 다른 것들에 비해 사용하기 편해서 Styled 를 사용해보려고 함

 

개인적으로 편한이유

 

1. 동적으로 스타일링 가능, props 로 동적으로 스타일링이 가능함,

 

2. 글 제목과 같이 공통적인 요소, 반본적인 요소등을 theme 에 정의해두고 사용가능,

 

물론 이 2가지의 이유도 전/후처리에서도 변수를 이용해서 글로벌하게 적용할수있겠지만 styled 만큼 깔끔하고 유연하지 못한것 같음

 

3. 깔끔한것 같다.

일단 테일윈드는 편하긴하다 클래스 네임으로 스타일링이 바로바로 가능하니깐,

그리고 theme 처럼 tailwind.css 에서 스타일링을 정의해두고 사용가능 한것도 알고있지만

동적인 스타일링은 안됬던걸로 기억한다. 동적으로 클래스 네임을 변화주어서 스타일링을 red blue 이런식으로 변화줄수있지만 아직 익숙하지않아서 그런가 불편을 느꼈다.

 

또 전후처리기도 클래스네임으로 글로벌하게 사용가능하지만 중복 된 css 가 많아진 경험을 했다. 예를들어서 컴포넌트화가 안되있다보니까 어디서 쓴 Button 스타일링도 (컬러같은 단순한 변수말고 color, bg, border-radius 다 먹인 버튼) 중복해서 쓰는 경우가 있었던거 같다. 혼자 작업하면 혼자 어 썻던거네? 하고 찾아보고 쓰면 되지만 협업일 경우는 놓치고 중복해서 쓸 가능성이 있지 않을까?

 

사실 너무 주관적인 글이고 다른 건 깊게 안써봐서 놓친 부분이 많을 수 있지만 서론이 길었고 일단 theme.ts 정의부터..

 

1. 세팅

사용방법은 간단하다 styled-compnent 를 설치했다면 src 폴더 어느경로든 theme.tsx 를 만들고 클래스형태로

본인이 정의하고싶은 css 를 정의해둔다.

보통 폰트, 컬러를 많이 하는데 이런식으로 정의해둔 스타일링을 사용했을 경우 메인 컬러가 변경 될 경우 전체를 쉽게 바꿀수 있다는 장점이 있다. 그냥 관리가 쉽다가 장점인데 깊게 생각하면 저런 예를 들수 있을 것 같다.

 

정의해두고 꼭 export 로 theme 를 내보내주자,

2. index.tsx 에 씌워주기,

여러 클래스로 만들어서 내보내준 theme 는 index.tsx 가 아니더라도 스타일링 하고싶은 컴포넌트에 ThemeProvider 로 감싸주고 theme 를 설정해주면 된다. index.tsx 에 하는 이유는 한번으로 전체 컴포넌트에 먹여서 상속하기위해서,

 

만약 버튼에만 하고싶으면 버튼 컴포넌트에만 하면 된다. 근데그러려고 사용하는게 아니기 때문에 index.tsx 에 해줌,,

App.tsx 에 해도 됨

3. 사용하기

음... 헤더 안에 login 이라는 클래스 안에서 사용한 경우인데

${({theme})} => theme . 지정한 클래스 . 속성 이렇게 사용하면되는데

혹시나 theme 를 export 했다해서 어디서 import 해오는 게 아니니까 위에서 어 왜 없지? 하고 안찾아도 됨,

아까 index 에서 import 했으니깐 (사실 저는 찾아본적이 있다...)

 

저렇게 쓰면 되지만 좀 더 이야기를 하자면 

원래 프롭스로 넘겨받은 값을 사용할때는 ${(props)} => props. 을 사용하는데 디스럭처(구조분해)를 통해서 원래 props.theme 를 

분해해서 ${({theme})} 로 사용하는 것 

 

theme.tsx 로 위에 device 를 통해서 반응형도 손쉽게 제어가 가능하지만 요즘 트렌드는 사이즈가 폴더는 280 까지 내려가고 맥 os 같은 경우는 2560px 까지 되니 너무 다양해져서 프로젝트마다/페이지마다 다르겠지만 반응형을 그렇게 디테일하게 하지는 않는 것 같다.

 

애플 홈페이지만 해도 콘텐츠 영역은 1024로 아에 박아두고 폰트도 12픽셀로 사용하는 것 같았고 수소문 해보니까 실제로 저렇게 pc/table 까지만 나누는 경우가 더러있는 것 같다.

 

4. 스타일 먹인 버튼

어디에 쓸지는 생각해보겠음..