개발자

React Query 커스텀훅 제작시 파일 분리 어떻게 해야할까요

2023년 10월 31일조회 523

현재는 /users API 관련 커스텀훅 작성시 useUsersQuery.ts useUserQuery.ts useCreateUserMutation.ts useUpdateUserMutation.ts useDeleteUserMutation.ts 과 같이 기능별로 ts파일을 모두 작성하였는데 문득 불필요하게 파일을 많이 생성하는거 아닌지 생각이 들었습니다. 실제 프로젝트를 진행하시면서 어떻게 커스텀훅을 제작하는지 궁금합니다. 폴더 구조도요!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

인기 답변

권혁진님의 프로필 사진

기능별로 파일을 나누는건 좋은 방법인것 같은데 너무 많다 싶으시면 코드가 길지 않다면 파일을 합치는것도 좋아보일듯 합니다 그리고 혹시 훅 파일이 /users 폴더 안에 들어가고 다른 도메인 들에도 각각 폴더별로 훅 파일이 분류 되어있다면 파일명에 users 는 빼셔도 괜찮지 않을까 생각도 드네요

Booting님의 프로필 사진

저도 처음 회사에서 작업할때 팀원분들과 저런식으로 했었는데 나중에 너무 많아져서 지금은 user에 관련된건 user.query.ts 안에 query/mutation 를 모두 작성 하는 방식으로 하고있네요

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 10월 31일

React Query를 사용하는 프로젝트에서 커스텀 후크를 어떻게 관리하고 구성하는지는 여러 방법이 있습니다. 다만, 가장 일반적인 접근 방식 중 하나는 특정 기능이나 도메인을 기준으로 연관된 커스텀 후크를 한 파일에 모으는 것입니다. 예를 들어, `users`와 관련된 모든 Query들을 한 파일(`useUserQueries.ts`)에 넣어 관리할 수 있습니다. ```typescript // useUserQueries.ts export function useUsersQuery() { // ... } export function useUserQuery() { // ... } export function useCreateUserMutation() { // ... } export function useUpdateUserMutation() { // ... } export function useDeleteUserMutation() { // ... } ``` 이런 식으로 관리하면, 기능별로 파일이 분산되지 않고 함께 관리될 수 있다는 장점이 있습니다. 이런 방식을 따르면 폴더 구조도 비슷한 방식으로 유지됩니다. 예를 들어: ``` src ├─ hooks # Custom Hooks │ ├─ useUserQueries.ts │ └─ (and other hook files...) └─ ... ``` 최종적인 선택은 프로젝트의 요구사항과 팀의 코딩 스타일에 따라 달라질 수 있습니다. 어떤 팀은 각 Query와 Mutation을 별도의 파일로 관리하는 것을 선호할 수 있으며, 어떤 팀은 관련된 것들을 모아서 관리하는 것을 선호할 수 있습니다. 가장 중요한 것은 일관성과 코드의 유지보수성입니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!