Today I learned

TIL Styled-components

지금까지 styled-components를 사용할때 미처 생각지도 못했던 부분에 대해서 써보려고 한다.

📌 * as S

개인적으로 나는 한 파일에서 component와 styled-component를 같이 사용하는 것을 선호하지않는다. 이유는 파일이 너무 길어져서 한눈에 알아보기 쉽지 않다는 점과 style파일 자체를 따로 분리하는게 더 깔끔하다고 생각해서였다.

근데 문제점은 다른 파일에서 사용한 styled-component의 이름을 import 해올때 사용한 만큼 다 선언을 해줘야한다는 것이었다.

예를 들면

import {
	Nav,
    Navbar,
    ..
    ..
    ..
} from './NavEle.js'

이런식으로 import를 해주니 길이가 너무길어져서 깔끔하지않다는 생각을 했는데 아래와 같이 사용해주면 깔끔하게 사용할 수 있다.

import * as S from '/NavEle.js'

<S.Nav>
	<S.Navbar>
    ....
    </S.Navbar>
</S.Nav>

너무 깔끔하다 ..

📌 속성값에 따른 styling

나는 true false 값에 따라 스타일링을 하는 방법밖에는 몰랐다.
그래서 사용할때 state 에 값을 저장해놓고 그게 true/false에 따라 스타일링을 했는데

data를 따로 저장해두고 그 값에 따라 사용하면 너무 편리하다.
예를 들어 Data.js 라는 파일에 객체값으로 저장을 해두고 Map을 돌릴때 그 값을 styled-component에 넣어주면 된다.

import {Data} from './Data.js'

import * as S from './Styled.js'

<S.Button bg={Data} />

//Styled.js

export const Button = styled.button`
background-color: ${({bg)=>(bg)}
`

이렇게 사용해주면 아주 간편하게 버튼색을 설정해줄 수 있다.