[React.js] 리팩토링 하며 생긴 질문 - axios 의 catch() 와 try-catch의 catch가 같은건가?

리팩토링 하면서 생긴 질문들

---

axios…..catch(error ⇒ console.error(error))

에러처리를 할 때 axios의 프로미스객체가 rejected 될 때를 catch 하는 형태로 해주는걸 봤다.

이걸로 에러 처리가 전부 된다면 try-catch문은 필요가 없는 것일까? 찾아봐야겠다.

---

https://stackabuse.com/handling-errors-with-axios/

위 링크의 글을 보면 아래 두 코드에서 catch의 역할이 완전 똑같다는 걸 알 수 있다.

심지어 res, error 마저 같은 값을 나타낸다고 한다.

export async function getTodoList(token: string | null) {
  try {
    const res = await http.get('/todos', { headers: getAuthorization(token) });
    if (res.status === 200) return res.data;

    throw new Error('API통신 실패');
  } catch (error: any) {
    console.error(error.message);
  }
}

위 사실을 숙지한 상태에서 내가 짰던 코드를 보자.

try - catch 문 안에 await get 요청을 넣는다. 이 후 res.status가 200이면 data를 return 하지만 그 이외의 경우 에러를 발생시킨다.

숙지했던 사안에 따르면 get요청중 timeout이 발생한다거나 4xx, 5xx. 에러가 발생한다면 catch에 error가 잡힐 것이고 해당 에러가 console.error로 나올것이다.

그럼 … 내가 짰던 코드는 … 논리적으로 괜찮은 코드였네?

---

컴포넌트에서 함수 호출부를 보자.

프리온보딩 코스에서 만난 다른 개발자들의 코드에선 나처럼 장황한 api 통신 코드가 없었다. try-catch를 사용한 코드는 하나도 없었고, error처리를 한다고 쳐도 대부분 .catch를 사용했다.

또한 컴포넌트에서의 함수 또한 달랐는데, 예를 들면 나는 create 부분을 아래와 같이 짰다.

const appendTodo = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      todoInputRef.current!.focus();
      if (todoInput === '') return;

      const fetchData = async () => {
        const data = await postTodo(token, { todo: todoInput });
        setTodoList(prev => [...prev, data]);
      };
      fetchData();
      setTodoInput('');
    },
    [todoInputRef, todoInput, token]
  );

async await을 여기서도 사용하기 위해 fechData라는 함수를 선언해주고 data가 나오고 나면 setTodoList를 해주는 형태로 함수를 짰다. 그런데 나처럼 이렇게 함수를 선언해서 실행한 사람이 단 한명도 없었다.

만약 api/todo.ts 에서 async await으로 함수를 짜두면 setTodoList하기 전의 await해주는 부분은 필요가 없는 것일까? 라는 의문이 생긴다. 한번 해봐야겠는데 어떻게 확인이 가능할지 잘 모르겠다.

fetchData 없이 한번 실험해보고 오겠습니다. ... fetchData없이 하니까 data에 Promise만 꽂히네요. 그럼 이런 구조가 맞다는 뜻이네요.

그래서 이 구조를 좀 고치기 위해서 useFetch 커스텀 훅을 만들어서 사용해보려 했으나, TodoList와 setTodoList가 props로 또 던져지는 구조라 그런 작업도 불가능하게 되었습니다.

그럼 이제 남은건 하나인것 같네요…

얼른 Redux를 사용해서 props를 줄이는게 어떨까 싶습니다. 그럼 useFetch를 사용해서 해결이 되나? 그건 사실 모르겠습니다만 일단은 해봐야 알것 같습니다.

뭔가... 더 좋은 코드를 만들어 내고 싶은데 살짝 한계에 부딪힌 느낌입니다. 얼른 Redux, React-query 등등을 다 사용해보면서 좋은 구조들을 많이 만나보면 궁금증이 좀 해결되지 않을까? 생각합니다.