Styled Components를 예습 정리 해보자
CSS-in-JS 이고 가장 인기 있는 라이브러리
npm
SASS에서는 네스팅이 가능해서 유지보수가 가능했다.
하지만, 크게 유용하지 않았다.
왜냐하면?
컴포넌트로 스타일도 재사용이 가능하기 때문에 styled Components 라이브러리를 이용해서 재사용을 할 수 있기 때문이다.
- 재사용도 가능할 뿐만 아니라, 네스팅도 가능하다?
const 함수를 변수에 저장한다.
const Button = styled.button` css 속성`백틱을 사용하여 css속성을 그대로 사용한다.
복잡한 로직을 유추해보자.
background: ${props} => (props.width < 2-- ? "abc" : "def")
abc를 blue로 바꾸면 파란색상으로 변경도 시킬 수 있다.
styled commpoent도 해당하는 속성의 값을 동적으로 할당해줄 수 있다.
인자에다가 props를 받아와서 함수를 리턴한다.
조건을 리턴.
true 일 경우 abv false 일때 def,
버튼 컴포넌트에서는 아무런 프롭스를 내려주고 있지 않다.
<Button primary width={100}}>
이 놈이 styled 컴포넌트를 될 수 있는 이유는?
속성에대한 값을 변화시키려면?
위와 같이 props로 통해서 조건에 따라 지정 해 줄 수 있다.
- 위에서 선언한 컴포넌트를 아래에서 styled 컴포넌트를 할당해줘야한다.
- const 함수로,
styled. styled. button 태그를 사용하고 백틱을 연다.
styled뒤에는 태그에 대한 정보를 입력 ! ex) Button태그 일 경우 button, p일 경우 .p 이런식으로 작성한다.
여기서 끝이 아니다.
위와 같이 기존에 사용했던 컴포넌트에서 a태그의 속성만 사용하고 싶다면
Button태그를 import화 시키고 가로 열고 태그or속성을 담으면 끝 !
버튼 태그를 참조해서 새로운 컴포넌트를 만들 수 있다.
버튼태그 컴포넌트를 바꿔줄 요소들만 추가적으로 스타일링이 가능하다.
중복된 스타일을 참조한다?
되기 신기하다.
개별적으로 가지는 어트리뷰트가 있는데
ex) input = type, value / img = src, alt 등
이것을 적용해보자!
styled.img + `attrs(()=>({
}))`
- 콜백으로 객체안에다가 속성을 지정해줘야한다.
ex)
const Input = Styled.input.attrs(()) => ({ type: "password" placeholder: "비밀번호 입력" })` background-color: tomato border: 1px solid black; padding: 8px 12px; `;
추가적 팀프로젝트에서 공통으로 사용될 css
GlobalStyle & ThemProvider
GlobalStyle < 리셋 css
ThemProvider < 커먼 css
Them
Global
theme.js 파일을 모아둔다.
두가지 방법이 있는데
1. import 방식
2. props으로 전달 방식
import 방식)
import {createGlobalStyle, ThemProvider} from "styled-compoents
props 방식)
color: ${(props) => props.them.orange}
