Styled-components

CSS for the <Component> Age

Styling your way with speed, strong typing, and flexibility.

 

여러 프로젝트의 기술스택에서 자주 봤던 Styled-components. CSS in Js 라이브러리 중에서 가장 인기있는 라이브러리라고 한다. 

 

잠깐 CSS in JS를 살짝 짚고 넘어가보자.

CSS in JS는, 말 그대로 CSS를 JS 코드 안에서 작성하는 개념이다. 기존의 CSS는 JS코드와 분리되어 작성되는 것과는 차이가 있다.  CSS in JS를 사용하면 아래와 같은 이점이 있다.

1. 컴포넌트 기반 스타일링: 각 컴포넌트마다 독립적인 스타일을 적용하여 컴포넌트를 더 쉽게 재사용
2. 스타일 스코프: 스타일이 컴포넌트의 범위로 제한되므로 이름 충돌이나 스타일 오염 문제를 방지
3. 동적 스타일링: JavaScript 로직을 활용하여 동적으로 스타일을 변경

즉, React와 같은 컴포넌트 기반 라이브러리와 궁합이 좋다. 당연하다. 이름에서도 명확히 알 수 있지만

Styled component은 리액트 컴포넌트에서 CSS를 확장적으로 사용하기 위해서 개발되었다.

 

HOW TO USE

1. 설치 

# with npm
npm install styled-components

# with yarn
yarn add styled-components

2. Styled componets 작동원리 

https://youtu.be/ZQcILg_OvY0

Styled-components 는 템플릿 리터럴에서 더욱 발전된 형태인 tagged template literals를 사용한다. 아래는 Styled-components가 사용하는 문법의 예시다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

styled 함수에 첫번째 매개변수로 h1을 전달하고, 두번째 매개변수로 백틱 안에 들어있는 템플릿 리터럴을 사용했다고 보면 되는데.. 고차함수의 개념으로 함수가 다른 함수를 리턴하는 형태로,  styled-components가 작동하는 원리를 더 자세히 알고싶다면 링크의 영상이 도움이 된다!  강추!

 

3. 사용방법

- 기본 문법 

//스타일 컴포넌트 작성
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;


//JSX
return
    <Title>
      Hello World!
    </Title>

보다싶이 컴포넌트 자체에 스타일을 주입한다. 게다가 템플릿 리터럴로 작성되있으니 만큼, props를 통해 동적으로 할당할 수 있다.

 

- props -

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

Button 컴포넌트가 사용될때 props로 primary가 전달되었는데 백그라운드 컬러가 props의 primary 유무에 따라 blue 혹은 gray로 동적으로 할당되는 구조다. 이것만 봐도, 재사용성이 얼마나 증가될 수 있는지 살짝 간을 볼 수 있다.

 

- 생성자로 사용해서 스타일 오버라이드 

const Button = styled.button`
  color: #BF4F74;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid #BF4F74;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

작성한 스타일드 컴포넌트를  위와 같이 사용하면 원하는 스타일 요소만 오버라이드 하여 새로운 컴포넌트를 생성 할 수 있다.

 

또, third-party componentd 에도 지원을 하기 때문에 리액트 라우터의 Link 컴포넌트 등에도 적용 할 수 있다.

3. 사용 후기 및 궁금한점

const Wrapper = styled.section`

margin-top: 80px;

`

function MyPage(){

    return <Wrapper>

        <h2>마이페이지</h2>

    </Wrapper>

}

이렇게 사용하면 section 태그를 Wrapper가 대체하게 되는건데,  음.. 원래대로  CSS 모듈 버무리듯이 사용하면  불필요한 컴포넌트가 생기게 되니까 설계를 잘 해서 사용해야 할 것 같다.

가독성이 떨어지지 않게, 컴포넌트가 너무 쪼개지지 않게 전략적으... 문법은 간단한데 생각보다 러닝커브가 있는듯한..!

좋은 레퍼런스를 찾아서 어떤식으로 구조화하는지 알아봐야하겠다.