profile
FE 개발 기록들을 정리해 놓은 이솝개발일지입니다.
post-thumbnail

#1. Styled-component

Styled-component 의 장점 Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다. 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다. 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다. Styled-component는 CSS-in-JS는 스타일 기법 중의 하나로 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존에는 html에서 class 를 지정해 준 뒤, 그에 따라 변화되는 Action들에 의해 class를 바인딩해주는 구조로 되어있다. 그렇기 때문에, 동일한 디자인을 사용하는 여러개에서 액션을 줄 때는, 각각의 컴포넌트 별로 스타일을 지정해주어야 한다.(특히 position) 그러나, Styled-component를 사용하게되면, 이러한 번거로움이 줄어들게 되는 장점이 있다. css컴포넌트에서 변수까지 지정해 주어 해결

2022년 7월 25일
·
0개의 댓글
·