[javascript] Next.js에서의 이벤트 처리 방법은 어떤 것이 있나요?

24 Nov 2023

javascript

이벤트 핸들러 함수를 정의하고 컴포넌트 내에서 사용하기: 각 이벤트에 대한 핸들러 함수를 정의하고, 해당 이벤트가 발생했을 때 실행될 동작을 작성합니다. 이벤트 핸들러 함수는 일반적으로 클래스 컴포넌트의 메서드로 작성되거나, 함수 컴포넌트 내에서 useState 를 사용하여 상태를 변경하거나 동작을 수행할 수 있습니다.

예시:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default MyComponent;

이벤트 속성을 통해 인라인 이벤트 처리하기: 이벤트가 발생할 HTML 요소의 속성으로 직접 이벤트 핸들러 함수를 작성하는 방식입니다. 이벤트가 발생했을 때 특정 동작이 실행될 수 있도록 합니다.

예시:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default MyComponent;

위의 예시에서는 <button> 요소의 onClick 속성을 사용하여 인라인으로 이벤트 핸들러 함수를 작성하여 작동합니다.

참고 문서 : React 이벤트 처리