Open scarf005 opened 1 year ago
음... 개인적으로 의존성 주입과 cloneElement가 어떤 연관성이 있는지를 잘 모르겠습니다. 어떤 관점에서 cloneElement를 사용하신걸까요? props로 받은 버튼을 그냥 사용하는 것과 어떤 차이가 있나요?
버튼을 누르면 enabled를 true로 해서 모달을 열어야 하는데, 의존성 주입받은 button props는 모달 내부의 enabled state에 접근할 수가 없기 때문에 받은 props를 그대로 쓸 수 없습니다. 때문에 button의 onclick 훅에서 setEnabled를 false로 설정해주기 위해 cloneElement로 컴포넌트 내부에서 훅을 추가했습니다.
개인적으로는 전역상태로 관리하는게 가장 낫다고 생각합니다. 저는 보통 전역상태, createPortal을 사용하여 구현합니다. 사용할 컴포넌트에서 특정 id 혹은 class의 node를 클릭 시 state를 변경시켜서 닫는 eventlistener를 쓰는 방향으로도 구현은 가능합니다만 지금 짜신 코드가 더 깨끗한 것 같아요 😃 dialog 태그를 사용할 수도 있습니다. 이 element는 self close가 되거든요. + 이건 다른말인데.. 코드 진짜 깔끔하게 잘짜시는것같아요. 혹시 코드를 짜는 스타일이나 기능 구분에 관해서 어떻게 공부하시나요 ? 어떻게 이렇게 깔끔하게 작성할 수 있게 되셨는지 궁금합니다.
원하던 기능
구현 내용
https://github.com/zerohyunkim/wanted-pre-onboarding-challenge-fe-1/blob/59c7b60e40303d15ad4e0885caea3a31ec1594ab/src/components/ToggleableModal/ToggleableModal.tsx
React.cloneElement
을 이용해 주입받은 컴포넌트에 동작을 추가했습니다.이유: 모달을 여닫기 위해
opened
변수에 의존하는데, 전역 context나 state 관리로 넘기자니 전역 스코프가 지저분해질 것 같았습니다.질문
의존성 주입 cloneElement
를 키워드로 검색을 해 보았지만 마땅히 나오지 않아 이렇게 구현하는 방식이 좋은 방법인지 궁금합니다. 이런 경우에 어떤 식으로 구현을 하는 것이 좋을까요?