styled components

styled components란?

말 그대로 스타일링된 컴포넌트다 우리는 예를들어 div라는 태그에 클래스를 주고 그 클래스에 해당하는 css요소를 만들어서 사용했다. styled components는 우리에게 친숙한 자바스크립트로 css를 사용하게 해준다. 물론 css자체를 모르면 사용할 수는 없다.
간단하게 말하면 미리 정의한 스타일링 된 컴포넌트를 태그처럼 JSX에서 사용하면 된다.

설치

$ npm install --save styled-components

기본문법

import React from "react";
import styled from 'styled-components';
    
class App extends Component {
  render() {
    return (
      <>
		<MyStyeld>Hello World</MyStyeld>
		
      </>
    )
  }
}

const MyStyeld = styled.div`
	border-radius: 50px;
    padding: 5px;
    min-width: 120px;
    color: white;
    font-weight: 600;
    -webkit-appearance: none;
    cursor: pointer;
    &:active,
    &:focus {
      outline: none;
    }
    background-color: ${props => (props.danger ? 'red' : 'purple')}
`;

export default App;
	

이것이 기본적인 작성 문법입니다.
Mystyled라는 스타일드 컴포넌트를 만들어서 그 특성을 div에서 상속 받습니다.
JSX에서 그 태그처럼 사용 할수 있게 되죠.
사실이 방법은 css에서 element define 기능으로 구현되었지 않을까 생각이 듭니다.

props

props를 받는 방법은 간단 합니다.

부모 컴포넌트에서 우선 props를 내려주었다고 가정하고 그 props의 이름은 isWebOpen입니다.

const WebOpenButton = styled.button<{ isWebOpen: boolean }>`
  width: 74px;
  height: 32px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: ${props => (props.isWebOpen ? "#356efb" : "#8e8e8e")};
  opacity: 1;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: ${props =>
    props.isWebOpen ? "1px solid #356efb" : "1px solid #8e8e8e"};
  border-radius: 0px 4px 4px 0px;
  border-left: 1px solid #356efb;
  opacity: 1;
  outline: none;
  cursor: pointer;
`;

위의 코드는 타입스크립트가 적용되어있으니 isWebOpen:boolean에서 boolean부분은 무시하셔도 될것 같습니다.
props는 true false값 즉, boolean으로 오고
그 값에따라 css값을 변경하는 코드 입니다.
사실 선언된 css코드 자체가 백틱으로 감싸져 있고 그렇기 때문에 그안에서 템플릿 리터럴로(${변수})
props를 가져오면 됩니다.

${props=>props.isWebOpen}
...

<WebOpenButton isWebOpen={this.props.isWebOpen}> </WebOpenButton>

<WebOpenButton {...props}> </WebOpenButton>

바로 그 값을 넣을 수도 있지만 3항 연산자를 사용하여 값을 변경시키는 것도 가능 합니다.
해당 스타일드 컴포넌트에 props 값을 연결 시켜 줄수도 있습니다.
리액트 컴포넌트에 props를 받았다면 이런식으로 모든 props를 연결 시킬수도 있습니다.

글로벌 스타일 적용

import styled, { createGlobalStyle } from 'styled-components';

const Global = createGlobalStyle`
	body {
		//적용 시키고 싶은 css
	}
`;

...

<Global>
	<MyStyled>hello world</MyStyled>
</Global>

styled components에서 createGlobalStyle을 불러와서
const Global 과 같이 적용해 주면 된다.

css클래스에 적용

const WebOpenButton = styled.button<{ isWebOpen: boolean }>`
  width: 74px;
  height: 32px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: ${props => (props.isWebOpen ? "#356efb" : "#8e8e8e")};
  opacity: 1;
  background: #ffffff 0% 0% no-repeat padding-box;
  border: ${props =>
    props.isWebOpen ? "1px solid #356efb" : "1px solid #8e8e8e"};
  border-radius: 0px 4px 4px 0px;
  border-left: 1px solid #356efb;
  opacity: 1;
  outline: none;
  cursor: pointer;
  & .className{
  	이러면 클래스에 접근 할수 있습니다. 
  }
`;

라이브러리 등을 사용할 때 썼던 방법인데 좀더 심플하고 좋은 방법이 있을 것 같습니다.

다른 요소에 css 상속 시키기

import React from "react";
import Rater from "antd";
class RatePage extends React.Component{
render(){
	return(
    <Rater />
    )
}
}
<Rater>

여기서 Rater는 별을 클릭 하면 점수를 state에 올려주고 애니메이션등을 표현하는 라이브러리라고 가정합니다. 이 라이브러리는 컬러를 받아서 별의 색상을 변경합니다.
여기 Rater에 제가 styled components를 사용하여 css요소를 상속시키겠습니다.

const RateStar = styled(Rater)`
	//상속 시키고 싶은 내용.
    EX) color:blue;
`
class RatePage extends React.Component{
render(){
	return(
    <RateStar />
    )
}
}
<Rater>

이렇게 하면 Rater라는 컴포넌트를 RateStar라는 styled component에 상속시킵니다.이제부터 RateStar라는 이름으로 Rater를 사용할수 있고 css요소도 변경 가능합니다.저에게는 엄청 유용한 기능이었습니다.

css 통째로 넘기기

내려주는쪽

받는쪽

import 구문에서 타입과 css메소드를 가져온다.

장점

제가 생각하는 장점은
스타일드 컴포넌트의 장점은 따로 css파일을 가질 필요가 없다는 것이고 그것이 의미하는 바는
webpack이 패키징 할때 불러올 파일이 적다는 뜻이기 때문에 성능과도 어느 정도 연관이 있지 않을까 하는 뇌피셜 입니다.

또하나의 장점은 하단에 있는 것처럼 props를 넘겨받아 그 값에 따라 css요소를 변경하는 것이 가능한데
익숙해지면 sass나 css를 사용하는것보다 더 직관적이고 간편합니다.

컴포넌트마다 css요소를 관리하고 한페이지에 있기 때문에 작업할때도 조금 더 편했습니다.

단점

익숙하지 않아서 그런지 제가 sass로 하던 기능들을 할때 더디게 진행된 부분이 있었습니다.
아직 토이 프로젝트를 통한 간단한 사용 외에는 현업에서 실 사용기간이 1주일도 되지 않아
단점을 캐치하기는 힘들었습니다.
제가 못하는 것인지 아니면 styled components가 이상한것인지를 모르기 때문.

.

총평

sass에 비해 사용이 더 간단합니다. 리액트 네이티브를 공부하며 처음 써보았는데 컴포넌트 단위로 더 관리가 잘되는 느낌입니다. 아무래도 sass는 여러가지를 공유시켜야 쓰기가 편한데 그러다 보면 상속받는 일이 너무 많아지고 나중에 관리가 잘 안되는 느낌이 조금 있었습니다.
styled components는 직관적이고 유지보수가 편리한 느낌입니다. 아직 이 아이와는 친하지 않지만 더 친해져 볼 생각입니다. 새로운 기능들을 알게 될때마다 시리즈로 업데이트 할 예정입니다 ㅎ