try-catch & then-catch

비동기 로직을 작성하다 보면 try-catch와 then-catch 모두 자주 마주치게 됩니다.

이 둘은 에러를 핸들링한다는 목적은 같지만, 쓰임새나 코드 스타일, 처리 흐름에서 차이가 있습니다.

 

---

try-catch

try-catch는 동기/비동기 코드에서 발생할 수 있는 예외를 잡아내기 위한 전통적인 방법입니다.

주로 async/await와 함께 쓰입니다.

 

async function getUserData() {
  try {
    const res = await fetch('/api/user');
    const data = await res.json();
    return data;
  } catch (error) {
    console.error('에러 발생:', error);
    throw error;
  }
}

• await 키워드는 Promise가 resolve 또는 reject될 때까지 기다린 후 값을 반환함
• try 블록 안에서 에러가 발생하면 catch로 흐름이 넘어감
• 코드 흐름이 동기적이기 때문에 가독성이 좋음

 

 

---

 

then-catch

then-catch는 Promise 체이닝 방식으로, 콜백 형식으로 비동기 결과를 처리합니다.

function getUserData() {
  return fetch('/api/user')
    .then((res) => res.json())
    .then((data) => {
      console.log('유저 데이터:', data);
      return data;
    })
    .catch((error) => {
      console.error('에러 발생:', error);
      throw error;
    });
}

 

• then()은 이전 Promise가 성공(resolve)했을 때 실행됨
• catch()는 에러(reject)가 발생했을 때 실행됨
• 콜백 지옥을 피하면서도 연속적인 처리가 가능

 

---

어느 쪽을 써야 할까?

상황	추천 방식	이유
여러 비동기 호출을 순차적으로 처리	try-catch	async/await로 가독성이 높아짐
단순 API 호출 후 처리	then-catch	간결하고 체이닝하기 쉬움
함수 안에서 return 흐름이 중요	try-catch	흐름 제어가 명확함
체이닝된 여러 Promise 처리	then-catch	하나의 체인으로 처리 가능

 

 

---

 

예시: 회원가입 처리

1. try-catch  (React + async/await)

const handleSignup = async (formData: SignupForm) => {
  try {
    const res = await axios.post('/api/signup', formData);
    toast.success('회원가입 완료!');
    navigate('/welcome');
  } catch (err) {
    if (axios.isAxiosError(err) && err.response?.status === 409) {
      toast.error('이미 가입된 이메일입니다.');
    } else {
      toast.error('회원가입 중 오류가 발생했습니다.');
    }
  }
};

 

 

• await으로 동기적인 흐름을 유지하며 코드 가독성이 좋음
• 에러를 구체적으로 분기 처리하기 쉬움 (e.g. 409 Conflict 처리)

 

2. then-catch 

const handleSignup = (formData: SignupForm) => {
  axios.post('/api/signup', formData)
    .then(() => {
      toast.success('회원가입 완료!');
      navigate('/welcome');
    })
    .catch((err) => {
      if (axios.isAxiosError(err) && err.response?.status === 409) {
        toast.error('이미 가입된 이메일입니다.');
      } else {
        toast.error('회원가입 중 오류가 발생했습니다.');
      }
    });
};

 

 

• 단순한 로직엔 여전히 직관적임
• 코드 흐름이 덜 직관적이지만, Promise를 직접 반환해야 할 때 유리함 (e.g. .finally(), 체이닝 등)