개발자
현재는 /users API 관련 커스텀훅 작성시 useUsersQuery.ts useUserQuery.ts useCreateUserMutation.ts useUpdateUserMutation.ts useDeleteUserMutation.ts 과 같이 기능별로 ts파일을 모두 작성하였는데 문득 불필요하게 파일을 많이 생성하는거 아닌지 생각이 들었습니다. 실제 프로젝트를 진행하시면서 어떻게 커스텀훅을 제작하는지 궁금합니다. 폴더 구조도요!
답변 2
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 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을 별도의 파일로 관리하는 것을 선호할 수 있으며, 어떤 팀은 관련된 것들을 모아서 관리하는 것을 선호할 수 있습니다. 가장 중요한 것은 일관성과 코드의 유지보수성입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!