1. 먼저 터미널에 styled-component를 설치해준다.
npm install styled-components
2. styled-component를 사용할 js파일에 import 해준다.
import styled from 'styled-components'
3. 아래와 같이 YellowBtn이라는 컴포넌트를 만든다고 생각하고, styled.button 뒤에 백틱 ``을 열어 그안에 css파일처럼 속성을 적어준다. 다음에 컴포넌트를 삽입할 함수 안에 <YellowBtn></YellowBtn> 으로 넣어준다.
import styled from 'styled-components';
let YellowBtn = styled.button`
background : yellow;
color : black;
padding : 20px;
`
function Detail(){
return (
<div>
<Box>
<YellowBtn>버튼임</YellowBtn>
</Box>
</div>
)
}
4. 버튼의 색을 가변적으로 바꿔 넣고 싶다면, props로 활용해 넣을 수 있다. props.임의지정 으로 값을 임의로 정해줄 수 있다. 그다음 컴포넌트에 props 값을 넣어준다.
import styled from 'styled-components';
let YellowBtn = styled.button`
background : ${ props => props.bg(props뒤에 값은 임의로 지정) };
color : black;
padding : 20px;
`
function Detail(){
return (
<div>
<Box>
<YellowBtn bg="yellow">버튼임</YellowBtn>
</Box>
</div>
)
}
5. styled-component의 장점은 값들을 구멍내어 넣을 수도 있고, 함수로 넣을 수도 있다.
import styled from 'styled-components';
let YellowBtn = styled.button`
background : ${ props => props.bg(props뒤에 값은 임의로 지정) };
color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
padding : 20px;
`
function Detail(){
return (
<div>
<Box>
<YellowBtn bg="blue">버튼임</YellowBtn>
</Box>
</div>
)
}
6. styled-component의 단점
단점1. JS 파일이 매우 복잡해집니다.
그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.
단점2. JS 파일 간 중복 디자인이 많이 필요하면 어쩌죠?
다른 파일에서 스타일 넣은 것들 import 해와서 쓰면 됩니다.
근데 그럼 CSS파일 쓰는거랑 차이가 없을 수도요
단점3. CSS 담당하는 디자이너가 있다면 협업시 불편할텐데
그 사람이 styled-components 문법을 모른다면
그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요하겠군요.
그래서 신기술같은거 도입시엔 언제나 미래를 생각해보아야합니다.