React - Styled Component

Styled Component란?

Styled Components란 JavaScript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리이다.

React에서는 JSX를 사용하기 때문에 JavaScript가 HTML을 포함하는 형태를 가진다. 여기에 CSS-in-JS 라이브러리인 Styled Componen를 사용하면 HTML, CSS, JavaScript를 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다.

HTML, CSS, JavaScript를 분리하여 작성하는 것이 아닌 페이지를 컴포넌트 단위로 분리하고 각 컴포넌트에 HTML, CSS, JavaScript를 한번에 작성하는 방식이다.

Styled Component 사용방법

1. 설치

npm i styled-components

2. import

import styled from "styled-components";

Styled Components를 사용하고자 하는 JS 파일에서 import 한다.

3. 컴포넌트 만들기

const Button = styled.button`
  background-color: powderblue;
  color: black;
`;

const App = () => {
  return (
    <>
      <Button>button</Button>
    </>
  );
};

export default App;

컴포넌트를 선언하고 styled.태그 할당 후 ``(백틱) 안에 CSS 문법을 사용하여 스타일 속성을 작성한다.

위 과정을 통해 만든 컴포넌트를 React 컴포넌트를 사용하듯 return() 내부에 작성하면 스타일이 적용된 컴포넌트가 렌더링된다.

컴포넌트 재활용하기

const Button = styled.button`
  background-color: powderblue;
  color: black;
`;

const BigButton = styled(Button)`
  padding: 10px;
  margin-top: 10px;
  display: block;
`;

const BigRedButton = styled(BigButton)`
  background-color: red;
`;

const App = () => {
  return (
    <>
      <Button>Button</Button>
      <BigButton>Big Button</BigButton>
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
};

export default App;

• 이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수 있다.
• 컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달 후 스타일 속성을 작성한다.

Props 활용하기(동적 스타일링)

const Button = styled.button`
  padding : 5px;
  margin : 2px;
  background: ${(props) => (props.greenyellow ? "greenyellow" : "white")};
`;

const App = () => {
  return (
    <>
      <Button>Button</Button>
      <Button greenyellow>Button</Button>
    </>
  );
}

export default App;

삼항 연산자를 사용해 Button 컴포넌트에 greenyellow 속성이 있으면 배경색을 greenyellow, 없으면 white로 지정한다.

왼쪽 버튼은 아무런 속성이 없으므로 배경색이 white로 지정되었다.

다양한 방법으로 구현하기

const Button1 = styled.button`
  margin-top: 10px;
  display: block;
  background: ${(props) => (props.color ? props.color : "white")};
`;

const Button2 = styled.button`
  margin-top: 10px;
  display: block;
  background: ${(props) => props.color || "white"};
`;

const App = () => {
  return (
    <>
      <Button1>Button1</Button1>
      <Button1 color="pink">Button1</Button1>
      <Button2>Button2</Button2>
      <Button2 color="yellow">Button2</Button2>
    </>
  );
};

export default App;

삼항연산자가 아닌 || 연산자를 활용할 수도 있다.

전역 스타일 설정 (GlobalStyle)

Styled Component는 전역에서 사용할 스타일을 설정할 수도 있다.

// GlobalStyle.js
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  button {
    width: 50px;
    height: 50px;
    padding : 5px;
    border-radius : 50%;
  }
`;

export default GlobalStyle;

GlobalStyle.js 파일을 만든 후 styled-components로 부터 createGlobalStyle을 불러온다.

전역 스타일을 설정할 GlobalStyle 컴포넌트를 선언하고 createGlobalStyle을 할당하여 스타일 속성을 작성한다.

// App.js
import GlobalStyle from "./GlobalStyle"

const App = () => {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="pink">Button1</Button1>
      <Button2>Button2</Button2>
      <Button2 color="yellow">Button2</Button2>
    </>
  );
};

export default App;

• 전역 스타일을 적용할 컴포넌트의 return() 내부의 최상단에서 <GlobalStyle /> 컴포넌트를 사용하면 전역 스타일이 적용된다.

S-dot 네이밍

기존 네이밍 방식의 단점

컴포넌트 네이밍 - 컴포넌트의 기능에 따라 네이밍
-> HTML의 구조를 파악하기 어렵고 함수 컴포넌트와 스타일 컴포넌트 구분이 힘들다.

className 네이밍 - 최상위 태그만 스타일 컴포넌트로 만들고 내부 태그들은 className을 사용하여 네이밍
-> 조건부 스타일링과 className 네이밍이 번거롭고 CSS 뎁스가 깊어진다.

import styled from 'styled-components';

const App = () => {
  return (
    <>
      <S.Style1>...</S.Style1>
      <S.Style2>...</S.Style2>
    </>
  );
}

export default App;

// S-dot 네이밍
const S = {
  Style1: styled.div`
    // css
  `,
  Style2: styled.div`
    // css
  `,
};

// 기존 방식
const Style = styled.div`
  // css
`;

스타일 컴포넌트를 S로 구분