인프런 커뮤니티 질문&답변
작성한 질문수
hooks 파일 분리 질문 드립니다.
해결된 질문
작성
·
53
·
수정됨
1
안녕하세요, 강의 잘 보고 있습니다.
저는 1년 차 백엔드 개발자 입니다. 미니 프로젝트에 프론트로 투입이 되어 zustand와 tanstack 학습을 위해 강의를 듣게되었습니다.
선생님께서 hook을 작성하실 때 함수를 각각 별도 파일로 분리하는 방식으로 진행하셨는데, 실무에서도 보통 함수마다 파일을 나누는 방식으로 진행하나요? 아니면 도메인 단위로 묶어서 하나의 파일안에 관련함수들을 관리하시는지 궁금합니다.
선생님 강의 덕분에 쉽고 재밌게 학습하고 있습니다. 감사합니다 : )
답변 2
2
안녕하세요 조하영님 이정환입니다.
우선 좋은 질문 정말 감사합니다. 말씀 주신 부분은 사실 정답이 정해져 있진 않은 영역이라, 개인마다, 팀마다, 그리고 프로젝트의 성격마다 다르게 적용될 수 있다는 점을 먼저 말씀드리고 싶습니다.
강의에서는 학습의 명확성을 위해 하나의 기능 또는 역할을 하는 훅, 유틸 함수를 최대한 작고 단위별로 분리해서 파일화하는 방식으로 구성했습니다. 이렇게 하면 개념을 하나씩 명확하게 파악하고, 각각의 책임이 분리된 구조를 이해하는 데 도움이 되기 때문입니다.
하지만 실무에서는 조금 더 유연하게 접근하는 경우도 꽤 많습니다. 예를 들어 같은 도메인 내에서 사용되는 여러 훅들을 하나의 useSomething.ts 파일 안에 묶어서 관리하거나, 같은 기능을 다루는 여러 함수나 상태 로직을 하나의 store.ts 혹은 utils.ts 파일로 묶어서 구성하는 경우도 흔합니다.
즉, 기능별로 모듈화하되, 너무 쪼개져서 관리가 어려워지는 걸 방지하기 위해 ‘도메인 단위’로 묶는 경우가 일반적입니다. 특히 코드량이 많아질수록 지나치게 분산된 구조는 오히려 불편함을 초래할 수 있기 때문에, 적절한 균형을 잡는 것이 중요합니다.
최근 프론트엔드 진영에서는 이와 관련해 FSD 라는 파일 시스템 구조가 핫하다고 하니 이에 관련해서도 한번 찾아보시면 좋을 것 같아요!
강의가 학습에 도움이 되고 있다니 정말 기쁩니다. 앞으로도 궁금한 점 언제든 편하게 남겨주세요 :)
감사합니다!
0
안녕하세요, 인프런 AI 인턴입니다. 조하영님.
프론트엔드 개발에서 Hooks를 어떻게 관리하고 분리할지에 대한 질문을 주셨군요. 이는 프로젝트 구조와 팀의 컨벤션에 따라 다를 수 있지만, 몇 가지 일반적인 접근 방식을 소개해 드리겠습니다.
Hooks의 파일 분리 방법
개별 파일로 분리: 각 Hook을 별도의 파일로 분리하는 방식은 유지보수성과 가독성을 높이는 데 유리합니다. 각각의 Hook이 독립적인 기능을 수행하고, 다른 컴포넌트에서도 재사용 가능할 때 이러한 접근 방식이 일반적입니다. 이로 인해 특정 Hook의 변경사항이 있을 때 해당 파일만 다루면 되어 편리하게 관리할 수 있습니다.
도메인 단위로 묶기: 관련된 함수와 상태 관리 로직을 동일한 파일에서 다루는 것도 한 가지 방법입니다. 이렇게 하면 관련 함수들이 서로 쉽게 협력할 수 있어 일관성을 유지하기 용이합니다. 특히, 특정 도메인 내에서만 사용되는 Hook 함수들은 함께 묶여 관리되는 경우가 많습니다.
실제 현업에서의 활용
실무에서는 프로젝트의 복잡도와 팀의 코딩 스타일에 따라 두 방법이 혼용될 수 있습니다. 일반적으로, 복잡도가 낮거나 단일 사용에 그치는 경우 하나의 파일에 묶어서 사용하기도 하고, 복잡하거나 재사용성이 높은 경우 개별적으로 파일을 분리합니다.
추가 참고 자료
유사한 질문과 답변을 통해 더욱 자세한 정보를 얻으실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.