[TSX] await 특정 시간 지나면 아이콘 변경

안녕하세요 리액트 + 타입스트립트를 이제 막 공부하기 시작했습니다.

항상 자바스크립트만 사용하다가 타입스크립트를 사용하려니 너무 헷갈리네요...

하지만 차근차근 공부하면서 블로그에 정리해 보려합니다.

 

아이콘과 버튼은 instructure UI에서 가져와 사용했습니다.

Instructure UI

 

---

예시

import {useState} from 'react'
import './App.css'
import MyButton from './component/MyButton'
// instructure/ui import
import {Button, IconCheckSolid, Spinner} from "@instructure/ui";

function App() {
    const [check , setCheck] = useState(false);
	
    // 시간 설정
    const sleep = (ms: number) => {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
	
    // 시간 설정 및 버튼 상태 변경 함수
    async function awaitSpinner(){
        setCheck(true);
        try{
            await sleep(1000);	// 1초
        }catch (error){
            console.log("에러");
        }finally {
            setCheck(false);
        }
    }

	// 버튼 눌렀을때 awaitSpinner 함수 실행
    function getButton() {
        return <Button onClick={awaitSpinner}>
            <div className="flex flex-row items-center">
                {check ? (
                        <Spinner renderTitle="Loading" size="x-small"/>
                ) : (
                    <IconCheckSolid/>
                )}
                <div className="pl-1">refresh</div>
            </div>
        </Button>;
    }

    return (
        <>
        	// 버튼 
        	{getButton()}
        </>
    )
}

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)