React Styled Components — 애니메이션 및 테마

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 styled-components  를 사용하여 애니메이션과 테마로 스타일이 지정된 구성 요소를 만드는 방법을 살펴보겠습니다.

애니메이션

CSS 애니메이션을 사용하여 styled-components 로 스타일이 지정된 구성 요소에 애니메이션을 적용할 수 있습니다. 예를 들어 다음 코드를 작성하여 이를 수행할 수 있습니다.

import React from "react";
import styled, { keyframes } from "styled-components";

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 5px;
  font-size: 1.2rem;
`;

export default function App() {
  return (
    <div className="App">
      <Rotate>foo</Rotate>
    </div>
  );
}

위의 코드에서 rotate 함수를 사용하여 keyframes 애니메이션을 만듭니다. 일반 CSS 애니메이션과 마찬가지로 애니메이션 코드를 전달합니다.

회전은 360도 회전입니다.

그런 다음 일반적으로 애니메이션 정의를 넣을 템플릿 문자열 내부에 rotate를 포함합니다. 영원히 실행되도록 지정했습니다.

마지막으로 Rotate에 App를 넣고 내부에서 회전하여 회전하려는 텍스트를 넣습니다.

테마

ThemeProvider 컴포넌트를 사용하여 익스포트하여 테마를 지정할 수 있습니다. 예를 들어 다음과 같이 사용할 수 있습니다.

import React from "react";
import styled, { ThemeProvider } from "styled-components";

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 5px;
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
Button.defaultProps = {
  theme: {
    main: "red"
  }
};

const theme = {
  main: "green"
};

export default function App() {
  return (
    <div className="App">
      <Button>Normal</Button>
      <ThemeProvider theme={theme}>
        <Button>Themed</Button>
      </ThemeProvider>
    </div>
  );
}

위의 코드에는 ThemeProvider 에서 제공하는 styled-components 구성 요소가 있습니다.

그런 다음 다음과 같이 스타일이 지정된 버튼을 정의했습니다.

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 5px;
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
Button.defaultProps = {
  theme: {
    main: "red"
  }
};

색상을 선택적으로 적용할 색상이 있는 theme.main 속성을 취합니다. 정의되지 않은 경우 버튼 색상을 빨간색으로 설정합니다.

그런 다음 ThemeProvider 외부에 추가된 버튼에는 빨간색 테두리와 텍스트가 있습니다. ThemeProvider 내부의 버튼은 다음에서 정의한 것처럼 녹색입니다.

const theme = {
  main: "green"
};

기능 테마

우리는 또한 테마 목적으로 함수를 정의할 수 있습니다. 예를 들어 다음 코드를 작성하여 기본 테마와 이를 기반으로 하는 테마를 정의할 수 있습니다.

import React from "react";
import styled, { ThemeProvider } from "styled-components";

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 5px;
  color: ${props => props.theme.fg};
  background-color: ${props => props.theme.bg};
`;

const baseTheme = {
  fg: "green",
  bg: "white"
};

const theme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

export default function App() {
  return (
    <ThemeProvider theme={baseTheme}>
      <Button>Normal</Button>
      <ThemeProvider theme={theme}>
        <Button>Inverted</Button>
      </ThemeProvider>
    </ThemeProvider>
  );
}

위의 코드에는 테마에서 다양한 스타일을 취하는 스타일이 지정된 Button 구성 요소가 있습니다. theme 속성에서 테마 변수에 액세스합니다.

그런 다음 버튼의 전경색과 배경색이 있는 baseTheme 를 정의했습니다.

그런 다음 전경색과 배경색을 뒤집어 기본 테마의 색상을 반전시키는 theme 를 정의했습니다.

따라서 일반 버튼은 녹색 텍스트와 흰색 배경을 가지며 반전 버튼은 흰색 텍스트와 녹색 배경을 갖습니다.

스타일 구성 요소 없이 테마 가져오기

스타일 구성 요소에 테마를 적용하지 않고도 테마를 사용할 수 있습니다. 이를 위해 withTheme 함수를 사용합니다.

예를 들어 다음과 같이 사용할 수 있습니다.

import React from "react";
import { ThemeProvider, withTheme } from "styled-components";

const baseTheme = {
  color: "green",
  backgroundColor: "white"
};

let Foo = ({ theme, children }) => {
  return <div style={theme}>{children}</div>;
};

Foo = withTheme(Foo);

export default function App() {
  return (
    <div>
      <ThemeProvider theme={baseTheme}>
        <Foo>foo</Foo>
      </ThemeProvider>
    </div>
  );
}

위의 코드에서 우리는 Foo prop을 사용하여 theme 객체에서 스타일을 가져오는 baseTheme 구성 요소를 정의했습니다.

그런 다음 ThemeProvider 구성 요소를 Foo 감싸기 때문에 baseTheme 소품을 사용하여 theme의 스타일을 가져올 수 있습니다.
Foo  에서 style 구성 요소의 스타일을 지정하기 위해 Foo 소품에 직접 전달했습니다.

따라서 화면에 녹색으로 표시된 'foo'를 볼 수 있습니다.

결론

CSS 애니메이션으로 애니메이션을 만들 수 있습니다. 하나를 생성하기 위해 문자열에 애니메이션을 넣은 keyframe 태그를 사용합니다. 그런 다음 animation-name이 있을 CSS에 반환된 애니메이션 코드를 넣습니다.
styled-components는 테마를 지원합니다. ThemeProvider 구성 요소로 테마를 지정할 수 있습니다. 그런 다음 스타일을 styled-components가 있는 구성 요소 또는 없이 정의한 구성 요소에 전달할 수 있습니다.