리액트의 조건문 : 삼항연산자를 사용한 예제

# TODO

아래 버튼을 클릭하면 문구가 확인하기 -> 확인됨으로 바뀌게 하고

버튼 상태를 비활성화 시켜보자.

 

#1 버튼의 상태를 변경할 변수값 선언

 

 // TODO: 변수정의

    let [isConfirmed, setIsConfirmed] = useState(false);

#2 버튼을 누르면 문구변경 / 상태변경 함수 정의

 

// TODO: 함수정의

    const handleConfirm = () => {

        setIsConfirmed(true);

     }

#3 문구부분을 삼항 연산자를 사용하여 변경

 

return (

    <div>

        <button onClick={handleConfirm}

                disabled={isConfirmed}

        >

            {

                (isConfirmed === true)? "확인됨" : "확인하기"  // button의 문구부분 -> 삼항연산자 사용

            }

        </button>

    </div>

  )