[TSX] onclick 버튼 조건부 연산자(삼항 연산자) 사용하기

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

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

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

 

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

Instructure UI

 

---

1. test.txs

test.txs component를 만들어 Test() 함수에 버튼을 생성하여 표출하였습니다.

import {useState} from 'react'
/* instructure ui import */
import {Button, IconCheckSolid, Spinner} from "@instructure/ui";

function Test() {
	/* check를 기본 false로 설정, setCheck로 변경 */
    const [check, setCheck] = useState(false);

    function getButton() {
        return <Button onClick={() => setCheck(!check)}>
            <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()}
        </>
    )
}

/* Test 함수 내보내기 */
export default Test

 

 

 

---

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

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

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