컴포넌트 재사용성 질문

Question

이전 강의 섹션 7 "실무용 폴더구조와 props"에서 21분 3초쯤에 src > components에서 한 번만 사용되는 컴포넌트들은 units, 두 번 이상 사용되는 컴포넌트들은 commons폴더에 만들어 준다고 하셨는데 섹션 7 "컴포넌트 재사용성"에서는 만들 컴포넌트는 등록페이지와 수정페이지 두 곳에서 사용되는데 12분 50초쯤에 src > components > commons이 아니라 src > components > units 폴더에 만드시던데 2번 이상 사용될 컴포넌트는 commons안에 만드는 거 아니었나? 혼란스러워서 저도 units 폴더에 따라 만들긴 했지만 제가 제대로 이해못한 것 같습니다... 이 부분에 대해서 한 번 더 설명해 주시면 감사드리겠습니다!

노원두 · Answer

안녕하세요! joka 님! 예리하신 질문이에요! 사실, 해당 컴포넌트는 commons에 들어가는게 더 적절할 수 있겠네요! 그래야 다른 팀원들이 헷갈리지 않을테니까요! 수업에서는 수업의 흐름상 units 폴더에 넣었는데, commons에 있는게 더 좋을 것 같아요!^^ * 그렇다면, 수업이 아닌 일반적으로는 어떻게 사용되는가? 수업에서와 동일하게 이미 다 완성된 큰 부품을 commons에 넣고 사용할 수도 있지만, 일반적으로는 그 안의 인풋과 버튼 등 자잘한 부품들을 모두 쪼개어 commons 에 넣고, 해당 페이지에서는 commons에 있는 부품들을 가져와서 조립 하는 형태로 만들게 됩니다 이렇게 되면, 등록과 수정 페이지가 추후에 달라지더라도 유지보수하기 쉬워요! (이 과정에 대해서는 뒷부분 react-hook-form과 공통컴포넌트 분리 과정 에서 배우게 됩니다!^^)

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. 컴포넌트 재사용성에 대한 질문이 잘 이해되지 않아서 죄송해요. 제가 이해한 내용을 설명해드릴게요. 강의 섹션 7 &ldquo;실무용 폴더구조와 props&rdquo;에서는 컴포넌트를 재사용하기 위해 units와 commons 폴더를 사용하는 방법을 설명하였습니다. 강의에서 예를 들었던 경우를 보면, 등록 페이지와 수정 페이지에서 사용되는 컴포넌트가 있다고 가정해서 설명드릴게요. 만약 컴포넌트가 두 번 이상 사용되는 경우, 즉 등록 페이지와 수정 페이지에서 둘 모두에서 사용된다면 해당 컴포넌트를 commons 폴더에 만드는 것이 좋습니다. 이렇게 하면 같은 컴포넌트를 두 번 작성할 필요가 없이 재사용할 수 있습니다. 하지만, 이해에 혼동이 있는 부분이 있을 수도 있으니, 어떤 컴포넌트가 어떤 폴더에 있어야 하는지 구체적인 코드나 예시를 알려주시면 더 정확한 답변을 드릴 수 있을 것 같아요! 감사합니다.