[CSS]Styled-Components

어제 오늘 CSS의 지옥에서 살고 있다.

html파일과 CSS파일을 오가며, 작업을 하다보니 이름도 헷갈리고 작명도 헷갈린다.

우연히 채용공고를 보다보니 Styled-Components얘기가 많아서 찾아봤더니

WOW! 이렇게 편리한 기능이 있다니.. 한번 써보자.

사용 순서는 이렇다.

1. 최상위 order로 변수를 선언한다.

const SimpleButton = styled.button`
  color:white;
  background-color:green;
`;

위와 같이 변수를 선언하고 styled 뒤에 태그 이름을 넣고 백틱을 넣어 원하는 CSS를 입력해준다. (Extension에 styled-components를 설치하면 자동 완성까지 되니 사용해보자!)

2. 작성한 Component를 render할 곳에 입력한다.

 function App() {
  return (
    <div className="App">
        <SimpleButton>Simple</SimpleButton>

    </div>
  );
}

이렇게 component로 입력하면 위에서 작업했던 component가 들어간다!

※ props를 이용하여 상태 변경도 가능

예를 들어 component를 이렇게 작성했다고 가정하자

const PrimaryButton=styled.button`
 color:${function(props){
   if (props.primary){
     return 'blue'
   } else {
     return 'red'
   }
 }};
`;

function App() {
 return (
   <div className="App">
       <PrimaryButton primary>Abnormal</PrimaryButton>
       <PrimaryButton >Normal</PrimaryButton>
   </div>
 );
}

props를 넣을 수 있고, props의 children에는 해당 태그의 text가 들어가있고, props명을 붙여 줬으면 해당 props명의 true/false가 표시된다.

위에 보면 Abnormal/Normal 버튼이 두개가 있는데, primary라는 props가 있느냐 여부를 고려하여 Abnormal 버튼은 파랑색!, Normal버튼은 빨간색으로 지정된다!