참고
- https://styled-components.com/
- styled-components로 타이핑 효과 만들기
- module.css로 CSS 스타일 관리하기
- classnames로 CSS 스타일 조건부 렌더링하기
아래 링크를 참고하여 타이핑 애니메이션 효과를 그대로 리액트에 재현해보자.
https://dabblet.com/gist/b04ab9f41084b0a66960
코드는 다음과 같다.
App.js
import React from "react";
import "./App.css";
const App = () => {
return (
<div>
<h1>Blood StrawBerry</h1>
</div>
);
};
export default App;
App.css
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-right-color: transparent; }
}
h1 {
font: bold 200% Consolas, Monaco, monospace;
/*width: 8.25em;*/
width: 16ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: typing 8s steps(16),
caret 1s steps(1) infinite;
}
위의 효과는 글자 크기가 일정한 Consolas 같은 글꼴에만 적용된다.
만약에 글자 수가 변하면 (Blood StrawBerry = 16 → length)
width: [length]ch; 와 animation: typing 8s steps(length), 를 수정해야 한다.
styled-components 적용하기
styled-components를 이용하면 리액트 js 코드에 css 코드를 쉽게 합칠 수 있다.
위와 같이 애니메이션이 포함된 경우도 수정이 가능하다.
npm install styled-components
npm으로 설치가 완료되면 import 하자.
import styled, { keyframes } from "styled-components";
예시 코드는 다음과 같다.
import React from "react";
import styled, { keyframes } from "styled-components";
const App = () => {
const typing = keyframes`
from {width : 0}
`;
const caret = keyframes`
50% { border-right-color: transparent; }
`;
const TypeAnimation = styled.div`
h1 {
font: bold 200% Consolas, Monaco, monospace;
width: 16ch;
white-space: nowrap;
overflow: hidden;
border-right: 0.05em solid;
animation: ${typing} 8s steps(16),
${caret} 1s steps(1) infinite;
}
`;
return (
<div>
<TypeAnimation>
<h1>Blood StrawBerry</h1>
</TypeAnimation>
</div>
);
};
export default App;
css 애니메이션은 아래와 같이 변경한다.
@keyframes typing {
from { width: 0 }
}
---------------------------
const typing = keyframes`
from {width : 0}
`;
그리고 애니메이션의 이름을 템플릿 리터럴에 넣어주면 된다.
const TypeAnimation = styled.div`
h1 {
font: bold 200% Consolas, Monaco, monospace;
width: 16ch;
white-space: nowrap;
overflow: hidden;
border-right: .05em solid;
animation: ${typing} 8s steps(16),
${caret} 1s steps(1) infinite;
}
`;
위에서 만든 styled-components를 아래와 같이 감싸주면 된다.
<TypeAnimation>
<h1>Blood StrawBerry</h1>
</TypeAnimation>
조금 더 응용하면 props를 이용해 글자 수가 변할 때 마다 고칠 필요가 없게 만들 수도 있다.
먼저 글자 수에 따라 바뀌는 부분에 16 → props.length를 받도록 하자.
const TypeAnimation = styled.div`
h1 {
font: bold 200% Consolas, Monaco, monospace;
width: ${(props) => props.length}ch;
white-space: nowrap;
overflow: hidden;
border-right: 0.05em solid;
animation: ${typing} 8s steps(${(props) => props.length}),
${caret} 1s steps(1) infinite;
}
`;
이 length를 다음과 같이 넘겨주면 된다.
const title = "Blood StrawBerry";
return (
<div>
<TypeAnimation length={title.length}>
<h1>{title}</h1>
</TypeAnimation>
</div>
);
};
어떻게 수정하더라도 모두 잘 적용된다.
전체 코드는 다음과 같다.
import React from "react";
import styled, { keyframes } from "styled-components";
const App = () => {
const typing = keyframes`
from {width : 0}
`;
const caret = keyframes`
50% { border-right-color: transparent; }
`;
const TypeAnimation = styled.div`
h1 {
font: bold 200% Consolas, Monaco, monospace;
width: ${(props) => props.length}ch;
white-space: nowrap;
overflow: hidden;
border-right: 0.05em solid;
animation: ${typing} 8s steps(${(props) => props.length}),
${caret} 1s steps(1) infinite;
}
`;
const title = "Blood StrawBerry";
return (
<div>
<TypeAnimation length={title.length}>
<h1>{title}</h1>
</TypeAnimation>
</div>
);
};
export default App;
'개발 > React' 카테고리의 다른 글
리액트 - 키보드 이벤트를 감지하여 복사 방지하기 (Detect Copy Keyboard Event) (0) | 2023.07.06 |
---|---|
리액트 CSS - pre 태그로 입력한 그대로 보여주기 (0) | 2023.06.28 |
리액트 - SweetAlert2로 모달, 팝업 만들기 (0) | 2023.06.26 |
리액트 - 깃허브 RESTful API로 파일 편집기 만들기 (Simple GitHub Code Management with React) (0) | 2023.06.23 |
리액트 - 줄 번호가 있는 Text Area 예제 (Add Line Numbers to HTML) (0) | 2023.06.21 |
댓글