react styled component 설치 및 애니메이션 적용

Styled-Components
는 태그 된 템플릿 리터럴을 사용하여 React 구성 요소의 스타일을 지정하는 데 널리 사용되는 라이브러리입니다. 내장된 애니메이션 기능을 제공하지는 않지만 , 또는 CSS 키프레임과 같은 다른 라이브러리를 사용하여 스타일이 지정된 구성 요소와 애니메이션을 쉽게 통합할 수  있습니다

설치 및 예시

npm i styled-components

터미널 입력

import styled from "styled-components";

app.js에 import 해서 사용(해당하는 컴포넌트 자바스크립트파일에서 import 후 사용하면 됩니다.)

      <Box>
        <Emoji>😲</Emoji>
      </Box>
      <Emoji>🌑</Emoji>

Emoji와 Box라는 컴포넌트 JSX 파일에 적용

const rotationAnimation = keyframes`
from{
transform: rotate(0deg);
border-radius: 0px;
}to{
  transform: rotate(360deg);
  border-radius: 50%;
}`;
const Emoji = styled.span`
  font-size: 36px;
`;
const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotationAnimation} 1s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  ${Emoji}:hover {
    font-size: 90px;
  }
`;

keyframe 사용해서 styled-components를 생성해서 css animation처럼 사용 가능합니다

${}을 사용해서 컴포넌트의 자식컴포넌트 역시 styled-components안에서 스타일 적용이 가능합니다 (sass와 유사)

---

상세 사용방법

프로젝트 설정 및 styled-components 설치:

React 프로젝트를 설정하고 styled-components를 설치합니다. Create React App을 사용하거나 선호하는 설정 방법을 사용할 수 있습니다.

npx create-react-app my-styled-components-app
cd my-styled-components-app
npm install styled-components

 

styled-components 불러오기 및 스타일 정의:

styled-components를 사용하기 위해 컴포넌트 파일에서 불러옵니다. 그런 다음 스타일을 정의하고 이를 변수에 할당합니다.

import styled from 'styled-components';
const StyledButton = styled.button`
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: #2980b9;
}
`;

이 예제에서는 StyledButton이라는 스타일 된 버튼을 만들었습니다.

스타일이 적용된 컴포넌트 만들기:

이제 StyledButton스타일을 사용하는 React 컴포넌트를 생성합니다. 아래는 예제 컴포넌트입니다.

import React from 'react';
const MyComponent = () => {
return (
<div>
<h1>Hello, styled-components!</h1>
<StyledButton>Click me</StyledButton>
</div>
);
};
export default MyComponent;

 

이 컴포넌트에서 StyledButton을 사용하여 스타일이 적용된 버튼을 렌더링 합니다..

컴포넌트 렌더링:

React 애플리케이션의 진입점 파일에서 컴포넌트를 렌더링 합니다..

import React from 'react';
ReactDOM from 'react-dom';
import MyComponent from './MyComponent';
ReactDOM.render(
<React.StrictMode>
<MyComponent />
</React.StrictMode>,
document.getElementById('root')
);

스타일이 적용된 컴포넌트 사용:

이제 MyComponent컴포넌트를 사용하여 스타일이 적용된 버튼을 포함하는 페이지가 표시됩니다. 스타일은 StyledButton에서 정의되었으며, 해당 스타일이 MyComponent내의 버튼에 자동으로 적용됩니다.