React에서 모달을 Context를 이용해 전역에서 선언식으로 관리하기

안녕하세요. 오늘은 modal 을 context api를 사용하여 전역에서 관리했던 경험을 공유하려합니다.

 

개념

우리는 context api 를 사용하여 전역에서 사용할 수 있는 modal 틀을 제작할거에요.

 

modal 은 react portal 을 사용해 띄워줄 겁니다. (z-index 문제 등 고려)

 

context에서 modal 의 상태를 관리합니다.

가져올 요소는 다음과 같습니다.

1. showModal
2. closeModal

개발

먼저 context 를 만들어줄게요.

App에 붙여줍니다.

이제 사용하면 됩니다.

 

저는 modal 을 갖고 있는 객체를 생성하여 showModal 함수를 매칭시켜두었습니다.

선언부

예시본

읽어주셔서 감사합니다

즐거운 코딩 되세요!