[CSS in JS] styled-components

JavaScript 파일 내에서 css를 사용하는 방법을 CSS-in-JS라고 한다. 그 중 자주 쓰이는 라이브러리가 styled-components(스타일드 컴포넌트)로서, 스타일링 시 ES6의 Tagged Templeate Literal 문법으로 js파일 안에서 선언함으로써 사용된다.

// App.js

import React from 'react';
import styled from 'styled-components';          // 1

const App = () => {
  return <Title>styled-components!!</Title>;    // 2
};

const Title = styled.h1`       ⌉
  font-size: 32px;             |
  text-align: center;          |  // 3
  color: purple;               |
`;                             ⌋

export default App;

1. styled-compoents 를 사용하기 위해 스타일드 컴포넌트의 styled를 import
2. UI가 그려지는 return문 안에서 <Title></Title>과 같이 html 태그와 유사한 형태로 컴포넌트를 만들어 html 태그처럼 선언한다. 따라서 선언해준 html태그가 가지고 있는 속성을 스타일드 컴포넌트로 선언한 컴포넌트에도 적용할 수 있다.
   ex) <LogoImage src="/images/logo.png" alt="로고" />
   • cf) 컴포넌트 이름은 태그처럼 사용되더라도 PascalCase로 작성한다.
3. 아래와 같이 styled 객체에 Tagged Templete 문법을 활용해서 css 속성을 정의한다.

const [컴포넌트명] = styled.[html태그]`
  [부여하고자 하는 css속성]
`;

동적으로 스타일을 적용하기 위해 props를 활용할 수도 있다. 부모에서 자식컴포넌트에 값을 넘겨줄 때 props를 사용한 것과 같이 이를 활용하여 조건에 따른 스타일링을 할 수 있다.
형태 :<컴포넌트 속성명=값 />
${(props)⇒props.속성명}으로 값을 유동적으로 사용할 수 있다.
Ex.<Button color="red" />에서 props.color 의 값은 red

이렇게 받은 props 값은 아래와 같이 동적으로 스타일링 할 수 있다.

// App.js

import React, { useState } from 'react';
import styled, { css } from 'styled-components';

const App = () => {
  const [changeColor, setChangeColor] = useState(false);

  const handleChanageColor = () => {
    setChangeColor(!changeColor);
  };

  return (
    <>
      <Button onClick={handleChanageColor} primary={changeColor}>
        Button
      </Button>
    </>
  );
}

const Button = styled.button`
  padding: 20px;
  margin: 10px;
  border: none;
  background-color: ${(props) => (props.primary ? "purple" : "pink")}; // 1
`;                         

export default App;