[React] Styled-Components 이해하기

이번 글에서는 CSS in JS 라고 불리는
Styled-Components에 대해 알아보겠습니다.

Styled-Components란?

styled-components을 해석해보면 꾸며진(스타일이 입혀진) 컴포넌트 라는 뜻입니다. 즉, 리액트 자바스크립트 파일 안에 스타일을 직접 선언하여 CSS 스타일링이 입혀진 html 태그 역할을 하는 컴포넌트입니다.

사용방법

1) yarn add styled-components 를 사용해 패키지를 다운로드 합니다.
2) import styled from "styled-components"; 를 입력하여 패키지를 import 해줍니다.

3) 원하는 스타일로 스타일컴포넌트를 만듭니다.

const Margin20 = styled.div`
  margin: 20px;
`;

4) 만든 컴포넌트를 사용하고자하는 곳에 넣어줍니다.

function App() {
  return (
    <div className="App">
      <Margin20>나는 마진 20을 가진 div!</Margin20>
    </div>
  );
}

이렇게 하고 리액트 앱을 실행해본후 잘되었다면 개발자도구에서 검사하면 margin 20px를 가진 div 박스가 하나 생겨있을겁니다.

또한, styled-components를 좀 더 폭넓게 사용하기 위한 개념으로
상속과 MixIn이라는 개념도 있습니다.

상속

이전에 만들었던 styled-components를 상속시켜서 그 컴포넌트의 요소와 CSS역할을 추가적으로 가질 수 있게 만듭니다.

const Margin20 = styled.div`
  margin: 20px;
`;

//Margin20을 상속받아 margin : 20px; padding: 20px을 가진 div요소 생성
const Padding20 = styled(Margin20)`
  padding: 20px;
`;

MixIn

css의 역할을 섞어주는 것으로, 필요한 css 기능을 좀더 유동적으로 사용할 수 있습니다.

// 믹스인을 사용하기 위하여 {css}를 추가해줍니다.
import styled, { css } from "styled-components";

const Margin20 = styled.div`
  margin: 20px;
`;

//믹스인을 하기 위한 상수를 선언해줍니다.
const horizontalCenter = css`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
`;

const Padding20 = styled(Margin20)`
// 적용하길 원하는 곳에 선언한 상수명을 믹스인해줍니다.
//그러면 해당 CSS 속성 값이 추가적으로 적용됩니다.
  ${horizontalCenter}
  padding: 20px;
`;

function App() {
  return (
    <div>
      <Margin20></Margin20>
      <Padding20></Padding20>
    </div>
  );
}

export default App;

---

추가적으로, styled-components도 props를 넘겨서 속성값을 변경 할 수도 있습니다. // 믹스인안에서도 사용 가능합니다.

const Margin20 = styled.div`
  margin: 20px;
  color: ${(props) => props.color || "blue"};
  //${({ color }) => `color:${color};`} 구조분해할당을 사용한 이런 방법도 있습니다.
`;
function App() {
  return (
    <div className="App">
      <Margin20 color="red">나는 마진 20을 가진 div!</Margin20>
    </div>
  );
}