리액트로 공통 컴퍼넌트 제작 중 인풋의 autofocus를 어떻게 처리할지 고민하면서 조사한 내용을 간단히 정리하였습니다.
autofocus란?
HTML 전역 속성(Boolean)으로 페이지가 로드되거나 다이얼로그가 떴을 때 해당 요소가 포거스되도록 한다.
하나의 도큐먼트에 하나의 요소만 autofocus가 적용된다. 즉, 다양한 요소에 autofocus 속성이 있을 경우 하나에만 포커스가 가는데, 어떤 요소에 포커스를 적용할지는 브라우저마다 다르게 해석될 수 있다.
<input name="q" autofocus>접근성 관련 우려
특정 form 요소에 자동으로 포커스를 가도록하면 스크린 리더기 사용자들은 그 어떤 사전 알림 없이 해당 form 요소로 텔레포트 당한다. 이렇게 되면 해당 요소의 라벨 이전의 어떤 정보도 얻을 수 없다.
예를 들어 '로그인' fieldset과 '비밀번호 찾기' fieldset이 한 페이지에 같이 있을 경우를 생각해보자. '아이디' label에 자동 포커스를 주었을 경우 이것이 어느 필드셋에 해당하는 라벨인지 알 수 없다.
뿐만 아니라 작은 기기 사용자 역시 갑자기 포커싱 된 요소로 이동할 경우 이전의 맥락을 잘 파악하지 못하거나, 로드 중 스크롤을 발생시키는 등의 문제를 야기할 수 있어 신중히 사용하여야 한다.
eslint에서는 no-autofocus 라는 룰이 ausofocus 사용을 금지한다.
리액트로 autofocus 구현하기
접근성 관련 우려가 있지만, 다양한 사용성 측면을 고려해 autofocus를 적용시키는 경우도 많다. 예를 들어 네이버 메인 페이지가 로드되면 바로 검색창이 autofocus된다. 이때는 검색엔진 포털 사이트라는 사이트의 목적에 부합하고, 페이지 내의 다른 요소들과 구분이 필요한 문맥이 없다는 점 등을 고려한 것으로 생각된다.
autoFocus 프롭으로 전달
- 브라우저마다 다르게 처리하는 autofocus의 문제를 해결하기 위해 autoFocus 프롭을 사용한다.
- 리액트는 autoFocus를 받고, 해당 요소가 마운트될 때 focus()를 호출한다.
- 따라서 autofocus라는 html 속성으로 지정할 경우 리액트는 아무런 처리를 하지 않을 수 있다.
- html의 실제 DOM 속성인
autofocus와 착각하여 적지 않도록 조심하자.
useCallback 사용
- []의존성을 가진 useCallback으로 오토포커싱을 하는 함수를 메모이제이션한다.
기타 등등
- 이 외에도 useRef() useEffect() 등 다양한 해결방법이 있다.
노트
- 오토 포커스는 form 요소 뿐만이 아니라 모든 요소에 적용할 수 있다.
