아래 코드를 보면 중복되고 직관적이지 않은 부분이 너무 많습니다.
그렇기에 styled-components가 필요합니다.
import styled from 'styled-components';
function App(){
return (
<div style={{ display: "flex" }}>
<div style={{ backgroundColr: "teal", width:100, height:100 }}></div>
<div style={{ backgroundColr: "tomato", width:100, height:100 }}></div>
</div>
);
}
export default App;
# 생략
const Father = styled.div`
display: flex;
`
const BoxOne = styled.div`
backgroundColr: "teal";
width:100;
height:100;
`
const BoxTwo = styled.div`
backgroundColr: "tomato";
width:100;
height:100;
`
const Text = styled.span`
color: white;
`
function App(){
return (
<Father>
<BoxOne >
<Text>Hello</Text>
</BoxOne>
<BoxTwo />
</Father>
);
}
# 생략
구현 부분을 보는 것만으로도 편안하고 직관적인것을 알 수 있습니다.
규칙은 간단합니다.
sytled
를 임포트하고 도트 연산자를 이용해서 html 태그 이름을 명시하고 이후 백틱을 이용하여 css문법을 적용합니다.