- 새로 진행하고 있는 개인 프로젝트(RN) 에서 모달을 관리하기 위해 여러 시도를 해보고 있다.
- 기억에 남기기 위해 적당히 구두로 작성해보고자함.
- 첫 시도는 ModalManager 컴포넌트를 사용해서 렌더링의 역할만을 맡는 컴포넌트를 이용해 Modal, Toast, BottomSheet 세가지를 동시에 관리하고자 했다.
- Layout 가장 상위에 나와야하는 UI 들.
- 당연하게도 세가지 다른 성격의 UI 를 한 곳에 묶어 관리하는 것은 무리가 있었다. 물론 그때의 나는 몰랐지만..
- 현재는 모달 / 토스트 / 바텀시트(미진행) 세 UI 를 전부 각각 따로 관리 하는 방식으로 개발을 진행하고 있다.
망한 시도
- 처음 각각의 UI 의 옵션만을 전달하고, 전역 상태에 저장된 데이터를 ModalManager 에서 map 으로 전달 받은 옵션별로 각 컴포넌트를 그려주는 방식으로 진행했다.
- 이를 위해 useModal Hook 을 구성해서 사용하였다.
- 동시에 여러 UI 를 중첩해서 표시가 가능하고, 원하는 UI 만 openModal 과정에서 할당한 uuid 를 통해 끌 수 있었다.
- 하지만 가장 큰 문제가 있었는데…
문제
- 모달의 content 로 컴포넌트를 넘기는 경우 content 내부의 상태가 변화하지 않는다….
- 그래서 어떤 입력을 받아야하는 경우 상태가 업데이트 되지 않고 이전 상태로 돌아가는 문제가 생겼다.
- TextInput 입력을 위한 state 를 모달의 content 로 함께 넘기는 과정에서 일어난 문제였는데,
TextInput 의 value 에 입력 state의 value 를 전달하면 값이 변경되지 않는 문제였다.
- 다만, value 를 넣지 않고 setValue 만 onChangeText 에 전달하는 경우에는 value 가 업데이트 되는 상황이 생겼다.
- 아마 모달의 content 로 상태를 전달한 경우 상태의 변화를 감지하지 못해 value 의 값이 변경되지 않고 고정되어 있고, 이로 인해 TextInput 의 값을 변경하지 못한게 아닐까 생각한다.
해결
- 그리해서… 구조를 바꾸었다.
- 애초에 value 를 안넘기고, 값은 변하니까… 하면서 다른 작업을 처리하는 건 동작만 되면 된다 라는 식을 안일한 마인드이고, 명백히 기형적인 동작이였으니까.
- 현재는 하나의 전역상태에 컴포넌트를 그대로 넘기는 방식을 사용한다.
- 이로 인해 각 스크린에서 모달 컴포넌트를 import 해서 렌더 영역에 작성하고, 모달이 열렸는지 아닌지 상태를 작성하고, 그 모달이 열렸는지 아닌지 상태를 토글하는 메소드를 작성해서, 이를 이용해서 조건부 렌더링으로 모달을 띄우는 긴긴 과정에서 해방되었다.
- 이젠 useModal 훅에 컴포넌트를 초기값으로 넣어주고, openModal, closeModal 만 딸깍하면 되는 구조가 완성되었다.
- 도움이 가장 많이 되었던 블로그는 바로 여기
https://yoonhaemin.com/tag/experience/react-modal/
- 새로운 모달 구조에 대해 고민할 때 내가 생각하던 진행 방향과 비슷했고, 너무 잘 풀어주셔서 많은 부분을 참고하게 되었다.
마무리
- 위에서 이야기했던 첫 구조는 현재 토스트 메시 를 간단하게 관리하기 위한 구조로 사용되고 있다.
- 단순히 옵션만을 받아서 표시하는데에는 충분했다.
- 이로써 content 로 전달한 내부의 상태가 이상동작하는 것을 해결 할 수 있었다.
- 하지만 아직 해결 못한 문제가 하나 더 남아있었는데, 이건 시간되면 써야겠다.
