[TIL] react-modal 오류 (that's already open)

 

React-Modal: Cannot register modal instance that's already open

 

왜 이 오류가 발생하나요?

오류 메세지를 보면 이미 열려 있는데, 또 열려고 한다고 합니다.

처음에는 모달을 여는 함수에 대한 문제가 있는거라고 생각했지만,

함수에 문제는 딱히 없었습니다.

 

오류의 원인은 다른 곳에 있었는데 그것은 바로 모달을 사용하는 방법에 있었습니다.

 

{isOpen ? <Modal isOpen={isOpen}/>}

 

이런식으로 조건부 렌더링을 했는데, 이 부분이 문제가 있었습니다.

이미 모달은 isOpen의 상태값에 따라 열리고 닫히는 게 구현되어 있는데

또 isOpen으로 한번 더 감싸서 해당 오류가 발생했습니다.

어떻게 해결하면 되죠?

간단합니다.

조건부 렌더링을 삭제해주면 됩니다.

 

위의 코드를 아래와 같이 바꿔주면 됩니다.

<Modal isOpen={isOpen}/>

 

 

 

참조: https://github.com/reactjs/react-modal/issues/808

Cannot register modal instance that's already open · Issue #808 · reactjs/react-modal