[React] 정해진 횟수 연속 클릭 구현

요구사항에 특정영역을 5회터치(or 클릭) 시 특정 페이지로 이동하는 기능이 있었다.

 

더블클릭같은 경우는 봤어도 5회 클릭은 구현해본적이 없어 조금 애를 먹다 구현을 하였는데

해당 내용을 포스팅 해보도록 하겠다.

 

<img src={imgLogo} onClick={() => Logic.ClickCountCheck(history)} />

컴포넌트에는 이렇게 작성을 하고

 

let clickCount = 0

export function ClickCountCheck (history) {
	clickCount = clickCount + 1
	setTimeout(() => {
		clickCount = 0
	}, 3000)
	if (clickCount === 5) {
		history.push('/A')
	}
}

로직 함수내부에 이렇게 작성 하였다.

 

useHistory로 만든 history라는 객체를 넘겨주었고 한번 클릭 된 시점에서 3초내로 4번 호출이 더 된다면 페이지를 이동하도록 구현을 하였다.

 

해당 구현 함수는 customHook으로 관리해 historyPath 와 요구하는 클릭 횟수를 파라미터로 넘겨줘서 url을 리턴받는것도 괜찮아보인다.