카카오테크캠퍼스 2기 | STEP2 | 26일차(24-07-29) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 26일차(24-07-29) 회고

📝 비동기 요청

• 기존 코드에서는 mutate 함수를 사용하여 비동기 요청을 처리했지만, 코드 리뷰를 통해 mutateAsync를 사용하라는 제안을 받았다. 이를 통해 mutate와 mutateAsync의 차이점을 명확히 이해하게 되었고, 어떤 상황에서 mutateAsync가 더 유용한지 고민하게 되었다. 특히 비동기 요청을 처리하는 코드의 가독성을 높이기 위해 async/await 구문을 사용하는 것이 더 나은 선택인지 깊이 생각해보았다. 콜백 함수와 비교했을 때 mutateAsync를 사용하면 코드가 더 직관적으로 보일 수 있다는 점이 특히 중요했다.
• 처음 mutateAsync를 사용해보면서 이를 제대로 이해하고 코드에 적용하는 데 어려움을 겪었다. 기존 코드와의 차이점을 명확히 이해하고 오류 없이 적용하는 것이 쉽지 않았다. mutate 방식에서는 콜백 함수로 에러를 처리했지만, mutateAsync에서는 try...catch 구문을 사용해야 했다. 따라서 에러 처리 방식의 변경이 필요했다.
• react-query 공식 문서와 다양한 예제 코드를 참고하여 mutate와 mutateAsync의 차이점을 학습했다. 이를 통해 두 함수의 동작 방식을 명확히 이해할 수 있었다. mutate는 콜백 함수를 통해 비동기 요청의 결과를 처리하는 반면, mutateAsync는 Promise를 반환하며 async/await와 함께 사용할 수 있다. mutate를 사용할 때는 성공 및 실패 콜백 함수를 인수로 전달하지만, mutateAsync를 사용할 때는 try...catch 구문을 사용해 비동기 요청의 성공 및 실패를 처리한다. async/await 구문을 사용하면 비동기 요청의 처리 로직이 더 직관적이고 명확해지며, mutateAsync를 통해 비동기 요청의 결과를 Promise로 받아 처리하면 코드가 더 깔끔해진다.
• mutateAsync를 사용하도록 코드를 리팩토링하면서 async/await 구문을 적용해 비동기 요청의 결과를 처리했다. 이를 통해 코드의 가독성을 높이고 에러 처리 방식을 try...catch 구문으로 변경했다.

const [password, setPassword] = useState('');
const navigate = useNavigate();

const { mutateAsync: register, isPending } = useGetRegister();

const handleRegister = async () => {
  try {
    const data = await register({ password });
    console.log('Registration successful', data);
    navigate('/dashboard');
  } catch (error) {
    console.error('Registration failed', error);
  }
};

 

📝 Daily Scrum

• 지난주 PR에 대한 리뷰 반영

 

😋 Today 회고

• 이번 학습을 통해 mutate와 mutateAsync의 차이점을 이해하고 async/await 구문을 사용해 비동기 요청의 가독성을 높이는 방법을 배웠다. 그러나 이론적으로 비동기 요청을 설명할 수는 있지만, 직접 코드를 작성하는 데는 부족함이 있어 예제를 통해 실습하면서 학습을 보완할 필요가 있다.

 

➡️ 참고 링크

https://velog.io/@leitmotif/mutate%EC%99%80-mutateAsync%EC%9D%98-%EB%8B%A4%EB%A5%B8-%EC%A0%90%EC%97%90-%EB%8C%80%ED%95%B4

mutate와 mutateAsync의 다른 점에 대해.

https://velog.io/@dev_jazziron/React-Query-mutation

React Query mutation