리액트 - 모달 구현 방법 참조

한 서비스에서 모달 개수가 많아졌을때 관리하는 방법 

 

내가 적용한 방식

모달을 보여주기위한 state && <Modal/> 조건부 렌더링

 

버튼 onClick handler 안에서 함수(open() 등 .. )로 관리하면 더 편하다

파라미터로 id, type, options 를 받는다 

 

class형 모달을 선언하고 

내부에서 메서드로 함수(open, close)를 정의 -> 모달 저장소에 정의한 메소드를 호출 

 

모달에 대한 저장소가 되는 클래스를 정의한다.

배열 형태의 DB 역할 (repository)

push, pop 메소드를 갖는다 

id, type, options 를 받아서 요소를  push

입력받은 id 를 받아서 요소를 pop

clear, getLast, getRefs(깊은 복사)등

 

return 

<뒷배경>

<모달 리스트.map => 모든 모달을 렌더>

Modal factory -> 이름을 받아서 jsx 요소를 리턴

 

각 기능을 분리한다.

Modal  DB, Modal service, Modal  renderer

 

COMMON_MODAL에서 여러 속성을 정의해둔다. (options)

 

멘토님이 일종의 디자인 패턴이라고 하셨는데 

추상화를 해서 인터페이스에서는 필요한 파라미터만 입력하면 내부 동작이 어떻게 이뤄지는지는 알 필요가 없다는

그런 맥락으로 이해가 되었다.