Styled Components (2)

글로벌 스타일

모든 컴포넌트에 적용하고 싶은 코드가 생겼을 때, 글로벌 스타일 컴포넌트를 활용하면 된다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Noto Sans KR', sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>글로벌 스타일</div>
    </>
  );
}

export default App;

createGlobalStyle이라는 함수는 style 태그를 컴포넌트로 만드는 것인데, Styled Components가 내부적으로 처리해서 head 태그 안에 우리가 작성한 CSS 코드를 넣어준다.

애니메이션

애니메이션에서 연속으로 보여주는 한 장 한 장의 이미지를 프레임이라 하고, 움직임의 기준이 되는 프레임을 키 프레임이라 한다.

CSS에서 키프레임은 CSS 애니메이션을 만들 때 기준이 되는 지점을 정하고, 적용할 CSS 속성을 지정하는 문법을 뜻한다.

@keyframes bounce {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.ball {
  animation: bounce 1s infinite;
  background-color: #ff0000;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

@keyframes 함수

@keyframes로 키프레임 애니메이션을 선언한 다음에, 그걸 animation 속성에서 이름으로 쓴다.

CSS 버전

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}

.placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

.placeholder-item {
  background-color: #888888;
  height: 20px;
  margin: 8px 0;
}

.a {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.b {
  width: 400px;
}

.c {
  width: 200px;
}

Styled Components 버전

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

const placeholderGlow = keyframes`
  50% {
    opacity: 0.2;
  }
`;

export const PlaceholderItem = styled.div`
  background-color: #888888;
  height: 20px;
  margin: 8px 0;
`;

const Placeholder = styled.div`
  animation: ${placeholderGlow} 2s ease-in-out infinite;
`;

export default Placeholder;

App.js

import styled from 'styled-components';
import Placeholder, { PlaceholderItem } from './Placeholder';

const A = styled(PlaceholderItem)`
  width: 60px;
  height: 60px;
  border-radius: 50%;
`;

const B = styled(PlaceholderItem)`
  width: 400px;
`;

const C = styled(PlaceholderItem)`
  width: 200px;
`;

function App() {
  return (
    <div>
      <Placeholder>
        <A />
        <B />
        <C />
      </Placeholder>
    </div>
  );
}

export default App;

keyframes 함수가 리턴하는 변수는 단순한 문자열이 아니라 JavaScript 객체이다.

테마

사용자가 보는 화면의 색상, 글자 크기, 글자 색 들을 모아 놓은 것을 테마라고 한다.

ThemeProvider

테마 기능을 만들기 위해서는 현재 테마로 설정된 값을 사이트 전체에서 참조할 수 있어야 한다.
Context 기반으로 테마를 사용할 수 있다.

import { ThemeProvider } from "styled-components";
import Button from "./Button";

function App() {
 const theme = {
   primaryColor: '#1da1f2',
 };

 return (
   <ThemeProvider theme={theme}>
     <Button>확인</Button>
   </ThemeProvider>
 );
}

export default App;

theme라는 객체를 쓸 수 있다.
여러 테마를 선택하게 하고 싶다면 useState로 테마를 바꿔주면 된다.

import { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import Button from './Button';

function App() {
  const [theme, setTheme] = useState({
    primaryColor: '#1da1f2',
  });

  const handleColorChange = (e) => {
    setTheme((prevTheme) => ({
      ...prevTheme,
      primaryColor: e.target.value,
    }));
  };

  return (
    <ThemeProvider theme={theme}>
      <select value={theme.primaryColor} onChange={handleColorChange}>
        <option value="#1da1f2">blue</option>
        <option value="#ffa800">yellow</option>
        <option value="#f5005c">red</option>
      </select>
      <br />
      <br />
      <Button>확인</Button>
    </ThemeProvider>
  );
}

export default App;

만약 테머 설정 페이지를 만들 경우 ThemeContext를 불러와서 참조하면 된다.

import { useContext } from 'react';
import { ThemeContext } from 'styled-components';

// ...

function SettingPage() {
  const theme = useContext(ThemeContext); // { primaryColor: '#...' }
}

상황별 팁

버튼 모양 링크가 필요할 때

as 프롭을 사용하여 버튼 태그로 만들어져 있는 컴포넌트를 a 태그로 바꿔서 사용할 수 있다.

<Button href="https://example.com" as="a">
 LinkButton
</Button>

원치 않는 Props가 전달될 때

Transient Prop이라는 걸 사용해서 원치 않는 Prop이 전달되지 않게 만들 수 있다.
Transient Prop을 만들려면 앞에다 $기호를 붙여주면 된다.

태그 함수

템플릿 리터럴 문법을 사용해서 실행할 수 있는 함수이다.