[React.js]styled-components를 이용한 keyframes

React에서는 자바스크립트로 상태 관리도 하고,

js에서 html로 렌더링도 해줍니다.

 

react에서는 jsx 방식으로 js에서 html로 바꾸는 방식을 지원한다면,

styled-components 패키지를 다운로드하여 js에서 css로 바꿀 수 있습니다.

 

1. styled-components 패키지 다운 받기

# yarn이 있을 경우
yarn add styled-components
# npm으로 다운 할 경우
npm i styled-components

 

2. styled-components 쓰는 방식

이 패키지는 scss 방식을 지원합니다.

//App.js
import React from 'react';
import styled, {keyframes} from 'styled-components';

const App = () => {
	return(
    	<div className="App">
        	<Box></Box>
        </div>
    )
}

const move = keyframes`
	//단계 별로 변화를 주는 코드
	0%{
    	top: 20px;
        left: 20px;
        background:green;
    }
    
    30%{
    	top: 50px;
        background:orange;
    }
    
    50%{
    	top: 100px;
        opacity: 0;
        left: 200px;
    }
    
    70%{
    	top: 150px;
        background: blue;
    }
    
    100%{
    	top: 20px;
        background: green;
        opacity: 1;
    }
`;

const Box = styled.div`
    width: 300px;
    height: 300px;
    border-radius: 150px;
    //여기서부터는 animation과 연관 있음
    background: green;
    position: absolute;
    top: 20px;
    left: 20px;
    opacity: 1;
    animation: ${move} 2s 1s infinite;
`;

export default App;

 

위의 코드에서 Box를 정의한 부분은 css의 속성을 주는 코드입니다.

 

그래서 Box태그로 되어 있는 부분을 Box에 정의되어있는 css 속성을 주는 겁니다.

 

그리고 keyframes은 애니메이션 속성 중 하나입니다.

 

여기서는 animation에 어떤 옵션이 들었냐면,

animation: keyframes이름 | 전체 진행시간 | 지연시간 | 반복 횟수 이렇게 되어있습니다.

 

옵션들의 순서는 어느 정도는 정해져 있는 것 같습니다.

 

keyframes 이름은 뒤로 가도 잘 작동하지만, 전체 진행시간과 지연시간이 순서가 바뀌면 바뀐 걸로 인식 안 합니다.

 

 

 

3. css에 자바스크립트에서 정의한 값 넘겨주기

//App.js
import React from 'react';
import styled, {keyframes} from 'styled-components';

const App = () => {
  const size = "300px";
	return(
    	<div className="App">
        	<Box size={size}></Box>
     	</div>
    )
}

const move = keyframes`
	0%{
    	top: 20px;
        left: 20px;
        background:green;
    }
    
    30%{
    	top: 50px;
        background:orange;
    }
    
    50%{
    	top: 100px;
        opacity: 0;
        left: 200px;
    }
    
    70%{
    	top: 150px;
        background: blue;
    }
    
    100%{
    	top: 20px;
        background: green;
        opacity: 1;
    }
`;

const Box = styled.div`
    width: ${props=>props.size};
    height: ${props=>props.size};
    border-radius: 150px;
    //여기서부터는 animation과 연관 있음
    background: green;
    position: absolute;
    top: 20px;
    left: 20px;
    opacity: 1;
    animation: ${move} 2s 1s infinite;
`;

export default App;

 

처음에 올린 코드를 실행했을 때와 결과는 똑같은 코드입니다.

 

이렇게 js에서 선언한 변수를 css에도 영향을 줄 수 있습니다.

 

자주 사용하지 않을 것 같지만, 퀴즈 같은 문제를 풀 때 bar를 조절하거나 좀 더

세밀하게 조작할 때 필요할 것 같습니다!

 

 

끝!