React(56) a 태그에서 onClick 이벤트 사용하기 (무효화)

 

 

<a 태그에 href (페이지 이동)과 onClick(온 클릭 이벤트) /> 를 둘 다 넣었다. 

실행 클릭하면 온클릭 함수가 실행되며 모달창이 뜨고 [확인] 을 클릭해야 페이지가 이동되는 순서이다.

하지만 생각처럼 풀리지 않았다. 어려워하지 말고 이제 구현하러 가보자.

 

---

React(56) a 태그 이벤트 막고 원하는 시점에 페이지 이동시키기 

 

모달에 넣을 내용들이다. (모달 타이틀 / 모달 메시지)

  const [modal, setModal] = useState<boolean>();
  const modalTitle = useRef<string>('');
  const modalMsg = useRef<string>('');

 

[결제하기] 버튼을 클릭했을 때, 조건에 따라 실행되는 메소드이다.

약관에 체크안하고(!check) 상대방이 거래 취소가 아닐 때(step !== cancel) 와 

약관에 체크했으나(check)  상대방이 거래 취소를 했을 때(step === cancel) 의 실행 내용이 다르다.

(check 나 step의 자세한 코드는 생략하기로 한다.)

  function moveToPay (e: React.MouseEvent) { 	// 클릭이벤트가 인자로 들어간다.

    if (!check && step !== 'cancel') {		// 약관에 체크 안하고 결제 버튼을 눌렀을 때,
      e.preventDefault();			// href 페이지 이동을 막고, 온클릭부터 실행
      setModal(true);				// 모달을 true 로 바꿔 클릭하면 띄운다.
      modalTitle.current = '약관을 확인해주세요.'; 	// 모달 타이틀
      modalMsg.current = '약관에 채크한 후에 결제가 가능합니다.'; // 모달 안 메시지 
      return;
    }
    
    if (check && step == 'cancel') { 		// 약관에 체크했지만, 상대방이 거래 취소를 했을 때,
      e.preventDefault();			// href 페이지 이동을 막고, 온클릭부터 실행
      setModal(true);				
      modalTitle.current = '거래가 취소되었습니다.'; 
      modalMsg.current = '거래가 취소되어 결제가 불가능합니다.';
      return;
    }
    
  }

 

 

<a> 태그 안에 onClick 이벤트를 넣는다.

					// [결제하기] 버튼 
<a href={`/mypage/payment/${user.id}`} onClick={e => moveToPay(e)}>
 결제하기
</a>


{modal && (
  <div className="modal">		// 모달 창
    <div>{modalTitle.current}</div> 	// 여기에 위에서 받은 모달 타이틀이 나온다.
    <div>{modalMsg.current}</div>	// 여기에는 위에서 받은 모달 메시지가 나온다.
    <button onClick={() => setModal(false)}>확인</button> // 확인을 누르면 모달이 닫힌다.
  </div>
)}

 

 

 

느낀 점 

이 포스팅을 처음 작성한 시점은 3달 전이다. 3달 후 현 시점 기준 코드를 봤을 때 아쉬운 점이 많았다. 직접 a 태그 url을 넣지 않고,  history.push 혹은 location.replace 혹은 location.href 로 넘기면 될 법도 하였다.

하지만 부족한 코드라도 그 과정 자체에 배울 점이 있고 의미가 있다고 생각하기 때문에 수정하지 않고 이 포스팅을 남겨놓기로 결정하였다. 3달 동안 조금이라도 꾸준히 성장하였구나 고생많았다! 그러므로 여러분도 성장하고 있다는 의미입니다. 화이팅입니다!

(history.push / .location.replace / location.href 에 대해서도 자세히 알아봐야겠다)