[React] Modal 구현

어떤 방식으로 react 모달을 구현할것인가 고민중..

• 단순 state

• react potal
  리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

이런 방법도 있다
useImperativeHandle로 효율적인 modal구현하기

.. 라고 임시 글을 쓰고 몇달 후
컴포넌트마다 Modal open,close state 로직을 반복시키는게 너무 귀찮아서 상태 공유를 할 수 있는 방법을 찾아봤다.

좋은 글을 발견하여 이 방법으로 프로젝트 내의 modal을 적용해보려 한다.
arara90님 의 글

나와 같은 고민을 하셨고 redux로 시도할까 고민한 부분도 같아서 도움이 많이 되었다.

방법은 Custom Modal Hook & Context API

Your next React Modal with your own "useModal" Hook & Context API- 영어 참고 글
Context API로 Modal 컴포넌트를 저장하는 방법이다. 하지만 컴포넌트를 state로 저장하는 것이 권장되지 않고 이 방법은 빠르게 해결하는 방법일뿐이라고한다~

최종 참고

https://nakta.dev/how-to-manage-modals-1