1.전역에서 모달 관리하기

1.1 도입이유

1.2 도입 목표

2. Context 하나로 여러 종류의 모달을 전역에서 관리하기

2.1 기존 모달 로직

2.2 context 생성

2.3 모달 사용하기

2.4 ReactDom.CreatePortal

3.결과물 및 마무리

1. 전역에서 모달 관리하기

1.1 도입 이유

현재 AelrtModalContext 로 모달을 사용하고있다. 기능적으로 문제는 없지만, 해당 코드를 볼수록 디자인과 기능이 강결합돼 있어서 Headless 처럼 두 로직을 분리해야 하지 않을까 라는 생각이 들었다.

또, 다른 UI의 모달을 새로 만든다면, 기존의 것(AlertModalContext)을 재사용할 수 없으므로, XXXModalContext를 여러개 새로 만들어야만 하는 상황이다. 그래서 모달을 잘 만들고 효율적으로 관리할 수 있는 방법을 찾아보게 되었다.

1.2 도입 목표

• 기능과 디자인을 분리해 디자인의 자유도를 높이자
• 하나의 Context 로 여러 종류의 모달을 관리하자

2. Context 하나로 여러 종류의 모달을 전역에서 관리하기

2.1 현재 모달 로직