보통 페이지 내에 모달을 띄우는 코드를 작성을 하게되면 아래와 같은 방법들을 사용해서 코드를 사용하는것을 많이 볼 수 있다.
그러나 위코드가 문제라고 생각되는 점이 몇개 있었다.
- 페이지마다 modal을 사용할때 modal 에 대한 상태관리를 해주는 코드가 생겨난다. ( Modal 컴포넌트에 대해 재사용성이 줄어든다)
- Modal 컴포넌트를 사용할때 무조건 visible과 onClose를 주입받아야한다. (코드의 의존성이 늘어난다. 저 사이에 컴포넌트를 더 잘게 쪼개다 보면은 props driling 현상도 충분히 발생할 수 있다.)
- 단일 책임 원칙에 위반한 설계란 생각이 들었다.
그러면 어떻게 수정해야 할가?
Modal 내에서 visible 에 대한 상태관리를 하도록 하고 Modal 외부에서 Modal내에 상태를 변화시키는 함수를 호출시키는 형식으로 구현하면 위와같은 문제를 해결할 수 있다 생각했다. 코드는 아래와 같다.
위와 같이 수정을 하게되면은 더이상 모달을 사용하는 페이지내에서 모달에 관한 상태관리를 하지 않아도 되고 모달 내에서 모달에 대한 상태관리를 맡길수 있게 됩니다.
내부는 어떻게 구현이 되야할가? (TypeChecking과 자동완성 지원을 위한 Typing작업이 포함된 코드)
useImperativeHandle와 forwardRef를 이용하면 부모에게 자식의 메서드를 넘길수 있다. 리액트 공식문서에는 useImperativeHandle 에대해서 아래와 같이 설명하고 있다.
react 는 기본적으로는 선언형 프로그래밍 방식을 권장하고 있고 ref를 사용한 명령행 프로그래밍 방식은 별로 권고하지 않는것을 알 수 있다. 그러나 이 modal 방식뿐만 아니라 잘만 활용하면은 좀 더 괜찮은 구조와 높은 재사용성 각 컴포넌트의 의존성을 낮추고 독립성을 보장할 수 있는 구조로 충분히 개선할 수 있다 생각하고, 다른 라이브러리들도 보다보면은 꽤나 사용되는것을 볼 수 있었다.
물론 Context나 외부 상태 관리툴(redux,mobx) 같은걸로도 동일하게 구현을 할수는 있다. 하지만 위와같이 구현하는게 좀더 간단히 구현할 수 있고 오버스펙이라 생각해서 위와같이 구현했다
결론
Modal은 웹프로젝트를 구현을 하다보면은 빠지지않는 컴포넌트인거 같다. 최근에는 React를 사용하는데 있어 프로젝트의 구조나 설계에 대해서 많이 생각을 하는데 그 결과 저런 코드가 탄생한것같다. 혹시나 이 글을 보는 다른 사람들중에 좀 더 괜찮은 방법이 있으면 공유해주시면 정말 감사할것같다!
