#2.4 Animations and Pseudo Selectors

본 포스팅은 노마드코더의 ReactJs 마스터 클래스 강의를 수강하고 작성되었습니다.

Animation

이번 포스팅에서는 styled component에서의 animation에 대해서 제시한다.

❗❗ helper function을 import 해줌으로써 animation을 줄 수 있다.

import styled, {keyframes} from "styled-components"; //예시

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

const Box = styled.div`
	height: 200px;
	width: 200px;
	background-color: tomato;
	animation: ${rotateAnimation} 1s linear infinite;
`;

이렇게 하면, 360도로 계속해서 회전하는 사각형을 만들 수 있다.

Pseudo Selectors : styled component안에 있는 다른 태그 선택하기

const Box = styled.div`
	height: 200px;
	//이렇게 하면, Box 안에 있는 span에 대한 스타일 적용
	span {
		font-size: 30px;
	}
`;

function App() {
  return (
    <Box>
    	<span>Hi</span>
    </Box>
);
}

∴ 우리는 모든 것에 styled-component를 할 필요 X
∴ 하나의 component에만 styled 처리해주고, 다른 건 target해주면 되는 것! 😊