feat(hooks): add 'useEventListener'

[sukvvon]

Overview

Checklist

• Did you write the test code?
• Have you run yarn run fix to format and lint the code and docs?
• Have you run yarn run test:coverage to make sure there is no uncovered line?
• Did you write the JSDoc?

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (bea638d) to head (ebfe5b5).

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #237   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           33        34    +1     
  Lines          836       853   +17     
  Branches       254       260    +6     
=========================================
+ Hits           836       853   +17     

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jungpaeng]

Does this have any better use than just using the onClick function?

[sukvvon]

@jungpaeng

This example isn’t meant to suggest that useEventListener is better than onClick — it’s just a simple way to demonstrate how the hook works with a ref.

[seungrodotlee]

I guess it will useful when using 'CustomEvent'

[seungrodotlee]

This implementation does not appear to be safe in an SSR (Server-Side Rendering) environment. Directly referencing client-side global variables such as document seems risky. We should look for a way to ensure safe operation even in SSR environments.

For example, when you need to attach handlers to client-side global variables like document or window, instead of referencing them directly, you can pass them as strings like 'document' or 'window'. Then, inside a useEffect, you can safely access them conditionally. This approach can help ensure stability in SSR environments.

Suggested change

	* useEventListener('click', (event) => {
	* console.log('Document clicked at coordinates', event.clientX, event.clientY);
	* }, document);
	* useEventListener('click', (event) => {
	* console.log('Document clicked at coordinates', event.clientX, event.clientY);
	* },
	* // ensure that `document` is only referenced on the client side.
	* 'document'
	* );