styled-components
보통 css를 사용하는 방식은 2가지이다.
- index.html에서 style로 지정해서 적용
- css 파일을 만들어 export해서 사용
첫번째 방법은 코드 관리를 한 파일에서 해야 하기 때문에 리펙토링이나 디버깅이 매우 힘들어진다. 그래서 css파일을 만들어 스타일을 한번에 관리하는 것이 보통이다.
<div>
<div>
<div>
.
.
.문제는 태그이다. 태그명을 보고 바로 해당 위치가 무엇을 작성하는 지를 알 수 있는 사람은 많지 않을 것이다.
styled-components를 이러한 불편함을 잡아주면서 효과적으로 스타일을 관리하게 해주는 라이브러리이다.
Form
const Main = styled.div`
width : 500px;
height : auto;
margin : 0
`
render(){
return(
<Main>
hello world
</Main>
)
}
css를 사용하는 양식은 비슷하다. styled-components의 가장 큰 특징은 태그 속성을 변수에 할당하여 변수를 태그처럼 사용할 수 있는 것이다. 또한 CSS 파일을 따로 만들지 않고 render 되는 부분 밖에서 작성하게 된다.
위의 예시처럼 Main의 실제 속성은 div이며 className이나 id같은 값들을 사용하지 않더라도 더욱 간결하게 속성을 특정할 수 있다.
장점
- 편리함
위에서도 언급했듯이 css가 스크립트 파일에 있으면서도 style 부분은 서로 분리가 되어있다. 그래서 한 파일 안에서도 스크립트와 스타일을 따로 작성할 수 있게 할 수 있다.
이로써 얻는 장점은 정말 많다. className을 사용하지 않더라도 분리할 수 있어서 영역간의 분리가 쉬워진다. 태그의 이름을 지정해서 지을 수 있으니 복잡한 선택자를 사용하지 않아도 편리하게 사용이 가능하다.
무엇보다 styled-components는 정의로 스타일을 작성하다보니 export가 가능하다. 따라서 theme.js 파일을 하나 만들어서 자주 사용하는 스타일을 저장했다가 불러와 사용할 수 있다!
//theme.js
exports const Button = styled.button`
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
`
.
.
//App.js
import Button from "./theme.js"
<Button>hello world</Button>
- props에 따른 style 적용
styled-components를 사용하는 가장 큰 이유는 css에 props를 넘겨서 상태관리를 할 수 있다!
import React, {useState} from 'react'
.
.
const [isClicked, turnClicked] = useState(false);
.
.
const Button = styled.button`
background-color = ${(props)=>(props.Clicked?red:white)};
`
.
.
.
<Button Clicked={isClicked}>버튼 클릭?</Button>
버튼을 클릭했는지에 따라 props를 설정해줌으로써 classname을 분기하지 않더라도 style을 바꿔줄 수 있는 것이 styled-components의 또다른 장점이라고 볼 수 있다.
