[react 리액트] 초간단 중복 클릭 못하게 하기 (feat. 로딩화면)

 

1. 어떻게?

state를 통해 버튼을 누르면 완료될때까지 버튼의 클릭 기능을 없애서 중복 클릭을 못하게 함.

 
 

2. 적용

1) 불리언 타입의 State 를 만들어 준다.

 const [isBtnDisable, setIsBtnDisable] = useState(false);

 
 

2) 버튼의 state (true, false) 두가지 상태를 정의해준다.

*여기선 버튼 대신 이미지를 사용하였다.
*클릭 후 처리 중엔 아예 클릭이 불가능하게 하였다.
 
 
- 클릭 전 (onClick 프로퍼티가 있음)

isBtnDisable === false 일 때 버튼은 이렇고
// isBtnDisable === false && <img onClick={클릭시 함수} />

 
- 클릭 후 (onClick 프로퍼티가 없음)

isBtnDisable === true 일 때 (클릭 후) 버튼은 이렇다
// isBtnDisable && <img />

 

// 클릭 전 버튼

{isBtnDisable === false && <img onClick={()=>{클릭시 작동 함수()}} className='클래스' src="이미지 주소" alt="img" />}

 

// 클릭 후 버튼 

{isBtnDisable && <img className='클래스' src="이미지 주소" alt="img" />}

 
 

3) 추가로 setter 함수에 (true), (false)를 넣어 언제 버튼을 누를 수 있고 언제 못 누르는 지 정의해준다.

setIsBtnDisable(true);

setIsBtnDisable(false);

 
 
 

📌 예시

1) 나는 버튼을 누르면 handle 함수가 실행되고 이 handle 함수에서 setter에(true)를 넣어 버튼을 못누르도록 함.

    const handleChangeMon = async () => {

        const newMonList = [...monList] // 지금까지 몬스터 리스트 받아오기

        setIsLoading(true); // 로딩화면 on

        setIsBtnDisable(true); // 버튼 다시 못누르게 on

        await timer() // 로딩 2초간 진행되게

        await fetch("http://localhost:3001/monsters")

            .then(res => res.json())

            .then(data => {

                const randomNum = Math.floor(Math.random() * 10);

                const newRandomNum = Math.floor(Math.random() * 10);

                if (newRandomNum > 5 && newMonList[randomNum].name === "??") {

                    newMonList[randomNum] = data[randomNum];

                    setMonList(newMonList)

                    catchMon(data[randomNum])

                } else if (newRandomNum > 5 && newMonList[randomNum].name !== "??") {

                    catchMon(data[randomNum])

                } else {

                    missMon();

                }

            })

        }

 
2) 그리고 특정한 로딩화면이 진행되는데 이게 다 진행된 후에 setter 에 (false)를 넣어 다시 클릭 가능하도록 함.

    // 못잡은 경우 알림

    const missMon = async () => {

        setIsLoading(false)

        setIsNotCateched(true)

        await timer()

        setIsNotCateched(false)

        setIsBtnDisable(false)

        await timer()

    }

    // 잡은 경우 알림

    const catchMon = async (mon) => {

        setIsLoading(false)

        setIsCatched(true)

        await timer()

        setIsCatched(false)

        alert(`야생의 '${mon.name}'을 잡았습니다!`)

        setIsBtnDisable(false)

        await timer()

    }

 
 
 

3. 완성

제작 중인 호켓몬스터

 
*아 물론 disabled 를 활용해도 좋다 ^^