[ES6+] styled Components
in JavaScript
styled Components
styled Components는 리액트를 위한 라이브러리이며,
JS에서 css를 사용할 수 있게 해준다.
정말 간단하게
const styled = css => console.log(css);
styled`border-radius:10px;
color:blud`;
이렇게만 써주어도 명령이 실행된다(신기)
()가 없어도 function이 실행되면서 콘솔을 보면
argument가 찍히는걸 볼 수 있다
=> templete literal( ` )로 함수를 호출 할 수 있다!
그렇다면 진짜 예시를 한번 보면,
const style = aElement => {
const el = document.createElement(aElement);
return el;
}
const title = styled("h1");
console.log(title);
//<h1></h1>
이라고 나오는데
title뒤에 templete literal을 사용하면
const style = aElement => {
const el = document.createElement(aElement);
return el;
}
const title = styled("h1")`
border-radius:10px;
color:blue;
`;
console.log(title);
//에러
에러가 뜬다.
에러가 뜨는 이유는 저 말이 결국에는 function을 두번 호출 했기 때문이다.
그래서
const style = aElement => {
const el = document.createElement(aElement);
return args => {
const styles = args[0]
el.style = styles;
return el;
};
}
const title = styled("h1")`
border-radius:10px;
color:blue;
`;
title.innerText = "complete!"
노마드코더의 ‘ES6의 정석’을 듣고 정리 =)
