자바스크립트 Custom React Hooks 접근성 향상 방법

06 Nov 2023

customhook

React는 사용자 인터페이스를 구축하기 위해 많은 개발자들에게 널리 사용되는 JavaScript 라이브러리입니다. React를 사용하면 컴포넌트 기반으로 재사용 가능한 UI 요소를 작성할 수 있습니다. React Hooks는 React 16.8 버전부터 도입되었으며, 함수 컴포넌트에서 상태 관리와 다양한 기능들을 사용할 수 있게 해줍니다. 이번 기사에서는 React Hooks를 사용하여 접근성을 향상시키는 방법에 대해 알아보겠습니다.

1. 접근성 관련 훅 생성

React에서 접근성을 향상시키기 위해 사용할 커스텀 훅을 생성하는 것으로 시작합니다. 이 훅은 재사용성과 유지 관리 측면에서 이점을 가지며, 사용하기 쉽고 명확한 코드 작성을 도와줍니다.

import { useEffect } from 'react';

/** 
 * 키보드 이벤트 핸들러를 등록하는 커스텀 훅
 * @param {Function} callback - 키보드 이벤트 발생 시 호출할 함수
 */
const useKeyboardEvent = (callback) => {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Enter') {
        callback();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [callback]);
};

export default useKeyboardEvent;

이 예시에서는 useKeyboardEvent라는 커스텀 훅을 생성하고, Enter 키가 눌렸을 때 콜백 함수를 호출하도록 합니다. 이렇게 생성한 훅을 다른 컴포넌트에서 사용하면 키보드 이벤트 핸들링을 쉽게 할 수 있습니다.

2. 접근성 향상을 위한 훅 활용

이제 위에서 만든 useKeyboardEvent 훅을 사용하여 접근성을 향상시키는 방법을 알아보겠습니다. 예를 들어, 버튼을 클릭할 때 콘텐츠를 업데이트하는 컴포넌트가 있다고 가정해 봅시다.

import React, { useState } from 'react';
import useKeyboardEvent from './useKeyboardEvent';

const ContentUpdater = () => {
  const [content, setContent] = useState('');

  const handleClick = () => {
    setContent('New content!');
  };

  useKeyboardEvent(handleClick);

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <p>{content}</p>
    </div>
  );
};

export default ContentUpdater;

위의 예시에서는 useKeyboardEvent 훅을 사용하여 키보드의 Enter 키를 눌렀을 때 handleClick 함수가 호출되도록 하였습니다. 따라서 버튼을 클릭하기 위해 마우스를 사용하지 않고도 키보드만으로도 콘텐츠를 업데이트할 수 있습니다.

3. 추가적인 접근성 기능 적용하기

접근성을 향상시키는데에는 다른 기능들도 사용할 수 있습니다. 예를 들어, 포커스 관리와 스크린 리더 기능 등을 적용할 수 있습니다. 이러한 기능들을 커스텀 훅으로 추상화하여 재사용 가능한 코드로 만들 수 있습니다.

// 예시: useFocus 훅
// 컴포넌트가 화면에 나타날 때 포커스를 설정하는 역할
const useFocus = () => {
  const ref = useRef(null);

  useEffect(() => {
    ref.current.focus();
  }, []);

  return ref;
};

위의 예시에서는 useFocus 훅을 생성하여 컴포넌트가 화면에 나타날 때 자동으로 포커스를 설정하도록 합니다. 이렇게 생성한 훅을 다른 컴포넌트에서 사용하면 포커스 관련 접근성을 쉽게 구현할 수 있습니다.

결론

React Hooks를 사용하여 자바스크립트 Custom 훅을 만들고, 이를 활용하여 접근성을 향상시킬 수 있습니다. 재사용 가능하고 간단한 훅 코드를 작성하면서 컴포넌트의 접근성을 높일 수 있습니다. 이러한 기술은 웹 애플리케이션의 사용성과 접근성을 향상시키고, 모든 사용자에게 더 나은 경험을 제공하는 데 도움이 될 것입니다.

참고 자료: