4전 4전

자바스크립트 애프리케이션에서는 사용자가 웹페이지와 상호작용하는 동안 발생하는 다양한 이벤트들을 다루게 됩니다.특히, scroll, resize, input, mousemove와 같은 이벤트들은 매우 짧은 시간 간격으로 연속해서 발생하는데, 이런 식으로 이벤트 핸들러가 과도하게 호출되면 성능 저하나 불필요한 서버 요청이 발생할 수 있습니다. 이런 문제를 해결하기 위해 디바운스(Debounce)와 쓰로틀(Throttle)이라는 기법을 사용해 볼 수 있습니다.이 두 기법은 연속해서 발생하는 이벤트를 효율적으로 제어하여 성능을 최적화하는 데 도움을 줍니다. 이번 글에서 디바운스와 쓰로틀에의 활용 방법에 대해 간단하게 한번 알아보겠습니다.| 디바운스디바운스는 연속된 이벤트 호출을 그룹화하여 마지막에 한 번만 실행..

| 이벤트 핸들러 리액트에서 이벤트핸들러를 JSX에 추가할 수 있습니다. 이벤트 핸들러는 클릭, 마우스 호버링, 폼 입력 등과 같은 상호작용에 따라 동작하도록 하는 기능입니다. export default function Button() { function handleClick() { console.log('클릭됨'); } return ( 클릭 ); } 이런 식으로 먼저 동작에 대한 함수를 정의해 준 다음 에 onClick={handleClick}를 추가해 주면 됩니다. 보통 함수 이름은 "handle"로 시작하고 뒤에 사용하는 이벤트를 적어준다고 합니다. onClick={handleClick}, onMouseEnter={handleMouseEnter} 이런 식으로 하면 됩니다. 또한 JSX에서 이벤트 핸..

| 이벤트 처리 1. 기본 형태 그냥 HTML에서는 소문자를 이용하여 이벤트 처리를 하는데 클릭 리액트에서는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. 클릭 2. 기본 동작 방지 리액트에서는 폼 제출 같은 기본 동작을 방지하려면 반드시 preventDefault를 명시적으로 호출해야 합니다. function Form() { return ( { e.preventDefault(); }}> 제출 ); }