react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting `ariaHideApp={false}`.
모달을 빠르게 만들기 위해 react-modal 라이브러리를 사용했는데 모달을 여는 버튼을 클릭하니 콘솔에 위와 같은 에러가 났다.
앱 요소가 정의되지 않았으니 `Modal.setAppElement(el)`을 사용하거나 `appElement={el}`를 설정해라, 또는 권장하진 않지만 `ariaHideApp={false}`를 사용할 수도 있다. 이는 모달이 열릴 때 스크린리더가 기본 내용을 볼 수 없도록 하기 위함이다.
라는 내용인데, 쉽게 설명하면
모달이 열렸을 때 화면을 바라보고 있는 사용자가 모달창이 아닌 다른 컴포넌트의 content를 바라보지 않도록 하기 위해 숨겨줄 엘리먼트를 정의해주는 것이다.
출처: https://velog.io/@seungsang00/React-React-Modal
라고 한다.
1. `ariaHideApp={false}` 사용하기 (비권장)
`ariaHideApp={false}`는 아래와 같이 모달에 적용하면 된다는 것을 알았으나, 권장하지 않는다고 해서 사용하고싶지 않았다.
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
ariaHideApp={false} //ariaHideApp={false}적용
>
// 모달 내용 ...
</Modal>
2. `appElement={el}` 사용하기
그러나 나머지 두 개는 어떻게 사용하라는 뜻인지 몰랐고, 검색을 통해 다음 방법을 알게되어 적어 넣었더니 에러가 해결되었다.
<Modal
isOpen={modalIsOpen}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
appElement={document.getElementById('root') || undefined} //appElement={el}적용
>
// 모달 내용 ...
</Modal>
2. `Modal.setAppElement(el)` 사용하기
또한 마지막 `Modal.setAppElement(el)`에 대해서도 알아보았는데, root element를 스크린리더로부터 감추기 위해 index.js에 rootElement를 확인 후 app.js에 아래와 같이 작성해주면 된다고 한다.
// App.js
Modal.setAppElement('#root')
참고자료
https://velog.io/@seungsang00/React-React-Modal