try catch 에러핸들링

 try catch? 

예외를 처리하기 위한 구문이다. 데이터를 받아온 이후 에러가 났을 때 처리할 수 있는 방법

try catch = 에러 핸들링

 

 try catch가 없다면 

웹페이지를 사용하던 중에 서버에서 전달받은 데이터가 잘못되어 갑작스런 에러가 발생했다!

try catch문을 사용하지 않았다면 사용자는 어떤 상황인지 알지 모른 채 다운된 화면을 보고 있어야 한다.

(개발자 콘솔을 열어볼지 않는 이상 절대 원인을 알 수 없다)

 

그런데 사람들은 에러의 원인을 알지 못한 채 페이지가 멈춰있는 것을 좋아할리 없다.

try..catch를 사용해 에러가 발생했을 때의 처리를 해줘야 한다.

 

 try catch사용 예 

try...catch 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/try...catch

try {
  nonExistentFunction();
} catch (error) {
  console.error(error);
}

 

 

아래의 예시는 axios로 데이터를 받아오는 코드이다.

try... catch문을 활용해 데이터를 잘 받아왔으면 useState에 내용을 업데이트 시킨 후, 화면에 보여주고

데이터 가져오기가 실패할 경우 console.log에 에러 내용을 확인해주고, alert으로 사용자에게도 알려준다.

 

아주 간단한 예외처리지만 catch블록 안에서 새로운 네트워크 요청 보내기, 사용자에게 대안 제안하기, 로깅 장치에 에러 정보 보내기 등과 같은 구체적인 일을 할 수 있다. 

const App = () => {

  const [data, setData] = useState(null)
  const onClick = async()=> {
    try{
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1'
      );
      console.log(response.data)
      console.log(JSON.stringify(data.data))
      setData(response)
    }
    catch(e){
      console.log(e)
      alert('Error데이터를 불러올 수 없습니다')
    }
  }

  return (
      <> 
        <button onClick={onClick}>불러오기</button>
        <div>{data && <textarea value={JSON.stringify(data.data)}/>}
        </div>
      </>
  )
}

 

catch문으로 error를 출력함