React Focus Lock

React Focus Lock

react-focus-lock은 React 애플리케이션에서 특정 UI 요소(예: 모달, 드롭다운, 사이드바) 내에서 포커스를 고정하는 기능을 제공하는 라이브러리입니다.

이를 통해 사용자가 Tab 키를 눌러도 지정된 영역을 벗어나지 않도록 제어할 수 있으며, 접근성을 높이는 데 유용합니다.

포커스 트랩(Focus Trap)

포커스 트랩은 특정 UI 요소가 활성화되었을 때, 키보드 내비게이션이 그 요소 안에서만 이루어지도록 하는 기술입니다.

예를 들어 모달이 열려 있을 때, 사용자가 Tab 키를 눌러도 모달 내부에서만 포커스가 순환하도록 설정하는 방식입니다.

포커스 트랩이 필요한 이유

• 접근성 향상: 키보드만 사용하는 사용자들이 원활하게 애플리케이션을 사용할 수 있도록 보장합니다.
• UX 개선: 사용자가 특정 인터페이스에서 벗어나지 않고 집중할 수 있도록 도와줍니다.
• 예상치 못한 행동 방지: 포커스가 모달 바깥으로 나가면 사용자 경험이 저하될 수 있습니다.

---

예제

npm install react-focus-lock
# 또는
yarn add react-focus-lock

 

import React, { useState } from "react";
import FocusLock from "react-focus-lock";

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div className="modal">
      <FocusLock>
        <div className="modal-content">
          <h2>모달 제목</h2>
          <p>이곳은 포커스가 고정되는 모달입니다.</p>
          <button onClick={onClose}>닫기</button>
        </div>
      </FocusLock>
    </div>
  );
};

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>모달 열기</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </div>
  );
}

• FocusLock 컴포넌트로 감싸주면 Tab 키를 눌러도 포커스가 모달 내부에서만 이동하게 됩니다.

---

특정 요소에서만 포커스를 허용하기

whiteList 콜백을 사용하면 특정 요소에서만 포커스를 허용할 수 있습니다.

<FocusLock whiteList={(node) => node?.className.includes("focus-allowed")}>

---

자동 포커스 설정

<FocusLock autoFocus>

• 모달이 열릴 때, 첫 번째 포커스 가능한 요소로 자동 이동됩니다.

모달 닫을 때 포커스 복귀

<FocusLock returnFocus>

• 모달이 닫힐 때 이전에 포커스가 있었던 요소로 자동 복귀합니다.

여러 개의 FocusLock을 사용할 때

하나의 애플리케이션에서 여러 개의 FocusLock을 사용할 경우, 예상치 못한 포커스 충돌이 발생할 수 있습니다.

이때 group 속성을 활용하면 개별적으로 포커스 관리를 할 수 있습니다.

<FocusLock group="modal-group">

• 같은 그룹으로 묶인 FocusLock 내에서만 포커스가 유지됩니다.