오늘은 Modal 컴포넌트를 context api로 관리하도록 구현을 했다.
이유는 기존에 Modal 컴포넌트를 사용하기 위해서는 모달을 닫기 위한 close를 props로 내려줘야만 했다. 왜냐하면 dimmed를 클릭했을 때 닫히게 하기 위해서는 isOpen을 false로 변경해야 했는데, isOpen이 모달 컴포넌트를 사용하는 부모가 가진 상태였기 때문이다. 딱히 방법이 없다고 생각했고, 결국 페이지에서 모달 컴포넌트를 닫고 있었다.
하지만 리뷰어님한테 모달이 열고 닫히는 것은 모달의 책임이지, 페이지에서 담당하는 것이 어색하다는 리뷰를 받았다.(내가 받은 것은 아니고 다른 크루들 것을 보다가 발견했다.)
생각해보니 모달을 열고 닫기 위해 useModal에서는 isOpen, setIsOpen과 같은 상태를 가지고 있었고, modalOpen, modalClose와 같은 함수를 가지고 있었다. 게다가 페이지에서는 모달에게 항상 close prop을 넘겨주고 있었다. 굉장히 비효율적이기도 하고, 단일 책임 원칙에 벗어나는 것 같은 느낌을 받았다.
그래서 context api로 모달을 관리하고, dimmed로 닫게하는 기능은 옵션으로 받으면 좋을 것 같다는 생각이 들었다. 그 결과 context api로 모달을 관리하게 되면서 페이지에서는 openModal, closeModal만 알면 되었다.
어려웠던 점은 context api로 관리를 하다 보니 각각의 페이지가 사용하는 모달이 다를텐데, 어떻게 할당해줘야 할지가 어려웠다. 고민을 하다가 모달 컴포넌트를 상태로 들고 있기로 했고, 모달을 열 때 어떤 모달을 열 것인지 모달 컴포넌트를 받기로 했다.
이 작업을 하면서 페이지에 함께 붙어 있었던 모달을 따로 분리하게 되었고, 코드가 엄청나게 깔끔해졌다. 모달을 페이지에서 분리하는 것이 좋은지, 아닌지 헷갈리지만 코드가 깔끔해져서 마음에 든다.
책임에 대해서는 레벨 1때부터 고민을 하던 것 같은데, 아직도 하나도 모르겠다. 레벨 3땐 감을 좀 잡았으면 좋겠다.
