Hello Jay's Programming World!

이벤트 리스너 내부에서 상태를 접근하면 최신의 상태를 가져올 수 없습니다. 이벤트 리스너가 등록될 시점의 상태로만 접근이 가능합니다. 그렇다면, 최신의 상태를 가져오기위해서는 어떻게 해야할까요? useRef를 이용해 이 문제를 해결 할 수 있습니다. 간단한 예제 프로그램을 만들어봤습니다. 화면에는 현재 count 상태 값을 출력하고, 버튼을 클릭하면 count 값을 1 증가시킵니다. 증가된 상태 값은 바로 적용되어 화면에 출력됩니다. 브라우저 화면을 더블 클릭하면 count 값을 alert 창에 출력하도록 이벤트 리스터도 추가했습니다. import "./App.css"; import { useEffect, useState } from "react"; function App() { const [count,..

오늘은 이벤트 생성하여 트리거 하는 방법에 대해 알아보도록 하겠습니다. 일반적으로 이벤트는 브라우저가 알아서 처리를 해주는 구조입니다. 예를 들어, 개발자가 Div에 Click 이벤트를 추가했다면, 브라우저가 해당 Div가 Click 된 것을 감지하여 Click 이벤트 핸들러를 호출해주는 구조입니다. 그렇다면, 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요? 그 방법에 대해 알아보겠습니다. 제가 JSFiddle을 이용해 샘플을 만들어보았습니다. Div와 Button이 하나씩 있습니다. Div에는 Click 이벤트를 등록해 놓았고, Div가 Click되면 'Clicked Div!'라는 메세지를 포함한 Alert창이 출력됩니다. Button에는 onclick으로 o..

마우스 이벤트를 이용하여 개발을 하다보면 마우스 왼쪽 클릭인지 오른쪽 클릭인지 구분해서 개발해야할 때가 있습니다. 일반적으로 mousedown 이벤트를 추가하면 왼쪽 클릭을 해도 호출되고 오른쪽 클릭을 해도 호출이 되기 때문입니다. 오른쪽 클릭의 경우엔 mousedown 이벤트도 호출되고 메뉴바까지 나오게 됩니다.그렇다면, 마우스 왼쪽 클릭인지 오른쪽 클릭인지 판단하기 위해서는 어떻게 해야할까요? 아래 JSFiddle 샘플을 준비했습니다. 빨간색 Div를 왼쪽 마우스로 클릭하면 "Right mouse button was not clicked" 라는 alert이 뜨고 오른쪽 마우스로 클릭하면 "Right mouse button clicked" 라는 alert 창이 뜨는 것을 확인할 수 있습니다. mouse..