728x90
๋ฆฌ์กํธ์์ ํ์ดํ ํจ๊ณผ๋ฅผ ์ฃผ๊ณ ์ถ์ด ์์ ๋ณด์๋๋ react-typing-effect๊ณผ ๊ฐ์ ์ฌ๋ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์๋๋ฐ,
์ ๋ ์ข ๋ ์ธ๊ณต์ง๋ฅ ์คํผ์ปค๊ฐ ๋งํ๋ ๋๋์ ์ฃผ๊ณ ์ถ๊ธฐ๋ ํ๊ณ ,
๊ตฌํํ๊ธฐ ์ด๋ ต์ง ์์ ๊ฒ ๊ฐ์์ ๋ง๋ค์ด ๋ณด์์ต๋๋ค.
๊ธฐ๋ฅ
1. ๋ฟ๋ฆด ํ ์คํธ ์ค๋น
2. ๋ฟ๋ฆด ํ ์คํธ (state)
3. ํ ์คํธ ๊ธธ์ด ์ฒดํฌ (state)
import React, { useState, useEffect } from 'react'
const TypingText = () => {
const txt = "์ค๋์ ๋ญ ๋จน์ง?";
const [Text, setText] = useState('');
const [Count, setCount] = useState(0);
return (
<p className="text" >{ Text }</p>
)
}
export default TypingText
render ๋์ ๋ง์ Text state ์์ text ์ ๋ฌธ์์ด์ ํ๋์ฉ setState ํ์์ต๋๋ค.
๋ฌธ์์ด ๊ธธ์ด๋ Text.length๋ก ๋น๊ตํด๋ ์๊ด ์์ง๋ง, ์ ๋ Count state๋ฅผ ๋ฐ๋ก ๋์์ต๋๋ค.
useEffect(() => {
const interval = setInterval(() => {
setText(Text + txt[Count]); // ์ด์ setํ ๋ฌธ์ + ๋ค์ ๋ฌธ์
setCount(Count + 1); // ๊ฐ์ ๋งํผ ์ฒดํฌ
}, 100);
if(Count === txt.length) { // Count๋ฅผ ๋ฐ๋ก ๋์ง ์๊ณ Text.length ์ฒดํฌ๋ ๊ฐ๋ฅ
clearInterval(interval); // ๋ฌธ์์ด ์ฒดํฌ๋ฅผ ํตํด setInterval์ ํด์ ํฉ๋๋ค
}
return () => clearInterval(interval); // ์ธ๋ง์ดํธ์ setInterval์ ํด์ ํฉ๋๋ค
})
๊ฒฐ๊ณผ
clear ํ๋ ์์ ์ด ๊ธ์๋ฅผ ๋ชจ๋ ์ถ๋ ฅํ ์์ ์ด๋ฏ๋ก,
์ดํ ์ก์ ์ฒ๋ฆฌ๋ ์ฝ๊ฒ ํ ์ ์์ต๋๋ค.
{ ... }
const [Color, setColor] = useState('black');
const handleAfterAction = () => {
setColor('orange');
}
useEffect(() => {
{ ... }
if (Text.length === txt.length) {
clearInterval(interval);
handleAfterAction(); // ๊ธ์๊ฐ ๋ชจ๋ ์ถ๋ ฅ๋ ํ handleAfterAction ํจ์๋ฅผ ํธ์ถํฉ๋๋ค.
}
return () => clearInterval(interval);
});
return (
<div className="App">
<p className="text" style={{color: Color}}>{Text}</p>
</div>
);
๊ฒฐ๊ณผ
๋ฐ์ํ
'๊ฐ๋ฐ ๐พ > ReactJS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React ์์ ์ ๋๋ฉ์ด์ , ์ธํฐ๋ ์ ๊ตฌ์ถํ๊ธฐ (emotion / tweenmax) (0) | 2021.06.23 |
---|---|
react draggable ๊ฐ๋จ ์ํ (0) | 2021.06.22 |
React ์์ select ์ฌ์ฉํ๊ธฐ (6) | 2021.06.14 |
React div ์คํฌ๋กค์ Fix ํ๊ธฐ (Element scroll) (0) | 2021.06.11 |
React ์คํฌ๋กค์ Fix ํ๊ธฐ (Window scroll) (4) | 2021.06.08 |