반응형

# 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>
  )

반응형

'React > 이론' 카테고리의 다른 글

메모이제이션  (0) 2023.09.02
State(useState)  (0) 2023.08.31
map, filter  (0) 2023.08.31
리액트 컴포넌트의 생명주기(LifeCycle) : 생성/수정  (0) 2023.08.30
CSS 적용  (0) 2023.08.30

+ Recent posts