[질문] 의존성 주입을 할 때 컴포넌트 내부에 의존하는 변수는 어떻게 처리하는 것이 좋을까요?

[scarf005]

원하던 기능

1. TODO 추가 버튼을 누른다
2. 폼이 있는 모달이 나온다
3. 입력을 완료하면 모달이 닫힌다

구현 내용

https://github.com/zerohyunkim/wanted-pre-onboarding-challenge-fe-1/blob/59c7b60e40303d15ad4e0885caea3a31ec1594ab/src/components/ToggleableModal/ToggleableModal.tsx

• 모달 프롭, 폼, 모달 열기 버튼을 의존성 주입받아 사용합니다.
• React.cloneElement을 이용해 주입받은 컴포넌트에 동작을 추가했습니다.
  • 버튼의 경우에는 onClick 훅을 모달 열기로 교체했습니다.
  • 폼의 경우에는 폼이 가진 onSubmit훅 실행 후 모달 닫기를 마지막으로 실행하도록 교체했습니다.

이유: 모달을 여닫기 위해 opened 변수에 의존하는데, 전역 context나 state 관리로 넘기자니 전역 스코프가 지저분해질 것 같았습니다.

질문

의존성 주입 cloneElement를 키워드로 검색을 해 보았지만 마땅히 나오지 않아 이렇게 구현하는 방식이 좋은 방법인지 궁금합니다. 이런 경우에 어떤 식으로 구현을 하는 것이 좋을까요?

[starkoora]

음... 개인적으로 의존성 주입과 cloneElement가 어떤 연관성이 있는지를 잘 모르겠습니다. 어떤 관점에서 cloneElement를 사용하신걸까요?
props로 받은 버튼을 그냥 사용하는 것과 어떤 차이가 있나요?

[scarf005]

버튼을 누르면 enabled를 true로 해서 모달을 열어야 하는데, 의존성 주입받은 button props는 모달 내부의 enabled state에 접근할 수가 없기 때문에 받은 props를 그대로 쓸 수 없습니다. 때문에 button의 onclick 훅에서 setEnabled를 false로 설정해주기 위해 cloneElement로 컴포넌트 내부에서 훅을 추가했습니다.

[2-NOW]

개인적으로는 전역상태로 관리하는게 가장 낫다고 생각합니다. 저는 보통 전역상태, createPortal을 사용하여 구현합니다.
사용할 컴포넌트에서 특정 id 혹은 class의 node를 클릭 시 state를 변경시켜서 닫는 eventlistener를 쓰는 방향으로도 구현은 가능합니다만 지금 짜신 코드가 더 깨끗한 것 같아요 😃
dialog 태그를 사용할 수도 있습니다. 이 element는 self close가 되거든요.
+ 이건 다른말인데.. 코드 진짜 깔끔하게 잘짜시는것같아요. 혹시 코드를 짜는 스타일이나 기능 구분에 관해서 어떻게 공부하시나요 ?
어떻게 이렇게 깔끔하게 작성할 수 있게 되셨는지 궁금합니다.