🛠️ 트러블슈팅
회원가입 페이지에서 공통컴포넌트 모달창….
- 부모 컴포넌트에서 불러온 모달창은 정가운데에서 자꾸만 열리고, 자식 컴포넌트에서 불러온 모달창은 같이 열리긴 하는데 자꾸만 왼쪽에서 열렸다. 그리고 부모컴포넌트 모달창만 클릭이 되고 자식에서의 모달창은 자꾸만 배경뒤에 숨겨져있음… 보이긴함…
부모컴포넌트의 모달창을 주석해도 왼쪽에서 열리는건 마찬가지였다.
-> 부모컴포넌트에서 자식컴포넌트들 나열되어있던 Step1~Step4를 div로 묶으니까 자식에서도 가운데에 뜨기 시작!!! ㅠㅠㅜㅜ
어디서부터 꼬인걸까 엄청 고민했는데, 부모 자식이 이상하게 연결되어 있는것 같아 중간에 뭔가 끊으려고 계속 보고있다가 시도해본건데 성공!!
- 아무리 다른 컴포넌트에서 불러도 자꾸만 하나의 모달창만 열리는 이유….
ex) 부모 - SignupPage에서 테스트1 모달창을 열고,
자식 - Step1 컴포넌트에서 테스트2 모달창을 열면
그냥 테스트1 모달창이 열려버렸다.
(테스트1 모달을 주석하면 테스트2가 정상적으로 열림)
분명 아이디찾기 - 아이디 조회
여기서는 부모-자식간의 다른 컴포넌트에서 모달창 불러와서 각기 다르게 잘 띄웠는데 왜 여기선 안되는가 엄청 고민했다.
회원가입 페이지도 url을 다르게 해놨고 컴포넌트도 다른 상황임.
아이디찾기 페이지도 url다르고 컴포넌트 다른 상황.
둘다 부모 자식으로 연결되어있고??
이러면 같은 상황에서 모달창을 불러오고 있는게 아닌가??
근데 사실 다시 생각해보니 아이디찾기와
회원가입페이지는 다른 url들을 띄우고있다 하더라도 동적 라우팅으로 띄우고 있어서 결국 SignupPage라는 하나의 컴포넌트를 보여주고 있는 상황.
= 이말인 즉, 하나의 컴포넌트 안에서 모달을 계속 부르고 있는 것이었다.
부모-자식으로 연결된 곳에서 다른 모달창들을 띄우고 있었음
vs
아이디찾기 페이지 - FindUserInfoPage
아이디 결과 조회 페이지 - FindIdResultPage
이렇게 url도 다르면서 컴포넌트 자체도 다른곳에서 불러오고 있는 것이었다.
(부모-자식으로 연결된 곳에서 부르고 있는게 아니었음)
그럼 어떻게 해결해야하지???
일단 gpt가 각 모달창에 id를 부여하는 아이디어를 제시했다.
이따 한번 해봐야지
-
zustand store에서 boolean으로만 관리하던 open, close 상태를
activeModalId : null 을 초기값으로 하여 modal id를 가지고 열고 닫는 방식으로 변경 -
activeModalId === modalId 이면 열리고, !== 이면 열리지 않는 로직
근데 문제!! 사용처에서 modalId를 그냥 string값으로 하드코딩하여 전달하면 문제가 생길거라는 생각이 들었다.
모달사용이 많아지면 많아질수록, 여러 사람이 관리하면 관리할수록 modalId가 중복될 확률이 높아진다…
따라서 query Key를 상수로 관리하듯이, modal id도 상수로 관리하면 어떨지 생각하게됐다.
📝 공통컴포넌트를 처음 제작해보며 느낀점 📝
1. 재사용성만을 고려해서 모든걸 공통컴포넌트화 하는게 꼭 좋은건 아니구나, 종속성을 많이 가지면 가질수록 이후 프로젝트가 커지면 커질수록 관리가 어려울수 있다! (사용하는데 변수가 많아질것이기 때문에 확장성에 영향이 있을수 있음!!) ex.addon 스타일설정, 점점 자꾸만 전달할 props가 추가되는 현상 등등
2. 이후 나만 사용하는게 아니라 다른 사람들도 사용할 것임을 항상 염두해야 한다!! 사용법이 너무 복잡하지 않아야하고, 중복된 id값을 입력하지 않도록 하드코딩에 항상 유의해야 한다!!
