Today I learned
지금까지 styled-components를 사용할때 미처 생각지도 못했던 부분에 대해서 써보려고 한다.
개인적으로 나는 한 파일에서 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>
너무 깔끔하다 ..
나는 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)}
`
이렇게 사용해주면 아주 간편하게 버튼색을 설정해줄 수 있다.