[react/공부] 깔끔한 코드 쓰기 : MBTI Test 사이트 프로젝트 트러블 슈팅

깔끔하게 코드 쓰기

프로젝트 링크

 

---

       개요 

프로젝트를 완료했지만 코드가 너무 장황하고 가독성이 떨어져 보였다.
어떻게 하면 깔끔하고 직관적으로 만들 수 있을지 고민하다가,

여러 컴포넌트에서 사용한 useMutation과 useQuery를 따로 모듈로 분리해보기로 했다.

 

 

---

       과정 💦 

01 useMutation 분리

 

먼저 컴포넌트 안에서 사용했던 훅들은 아래와 같은 형태였다.

const mutation = useMutation({ mutationFn: async () => { ... } })

짧게 예시로 작성한 거라 나름 깔끔해보이지만 거의 열줄짜리 훅들이었고, useQuery와 함께 사용하거나 훅이 많아지면 굉장히 길었다.

 

먼저 별도의 useMutations.js 파일을 만들고, Mutation 훅들을 따로 빼주었다.
사용 목적에 맞게 이름을 정리하여 useAuthMutations, useResultsMutations로 나누고,
회원가입과 로그인 같은 경우 useRegisterMutation 등 구체적인 네이밍을 적용했다.

 

처음에는 그냥 단순하게 훅을 다른 파일에 복사 붙여넣기 해줬는데,

훅을 그런식으로 컴포넌트 밖에서 사용하면 안된다고... 에러가 떴다.

그래서 어떻게 할지 고민하다가 함수로 한번 감싸주기로 했다.

 

그렇게 사용 목적에 맞게 각 파일에 필요한 api를 불러 훅들을 만들어줬다.

export const useRegisterMutation = () => {
  return useMutation({
    mutationFn: registerUser,
    onSuccess: () => { ... },
  });
};

 

그 후 컴포넌트에서는 단순히 mutation 훅을 불러와서 사용했는데,

이때 처음에는 아래와 같이 훅을 먼저 불러온 후, mutate를 붙여 선언해준 형태였다.

const LoginMutation = useLoginMutation();
const login = LoginMutation.mutate;

이것도 두개가 넘어가니 너무 길고 지저분해 보여서 구조분해를 해서 사용해보기로 했다.

const { mutate: login } = useLoginMutation();
login(id, pw);

이렇게 하니 코드가 훨씬 깔끔해졌고, 구조분해 할당을 활용해 mutate를 직관적인 변수명으로 변경할 수 있었다.
필요한 경우 onSuccess 등 추가적인 메소드도 활용할 수 있어 사용성이 더 좋아진 것 같다.

 

 

02 useQuery 분리

 

그 후 useQuery도 분리해보기로 했다.

이번 프로젝트에서는 프로필 정보 가져오기와 결과 가져오기 두 가지 경우에만 useQuery를 사용했다.
그래서 하나의 파일 useQueries.js에 모두 모아 정리했다.

마찬가지로 함수에 묶어서 정리해줬고,

export const useTestResultsQuery = () => {
  return useQuery(['testResults'], fetchTestResults);
};

 

 

사용법도 간단했다.

 

const { data: result } = useTestResultsQuery();

이렇게 정리하니 코드가 훨씬 직관적이고 가독성이 좋아졌다!

 

 

---

 

코드가 깔끔해지려면 최대한 분리할 수 있는 것은 분리하고,

직관적인 변수명을 활용하는 것이 너무 중요한 것 같다.
이번에 프로젝트를 빨리 끝낸 김에 코드 정리에 시간을 많이 투자해 보았는데,

이 기회로 깔끔하게 코드 적는 능력이 한 단계 성장한 느낌이 들어 기쁘다!

앞으로도 유지보수하기 쉬운, 그리고 가독성이 좋은 코드를 목표로 여러가지 방법을 찾아보고 시도해봐야겠다.