Beginner 4회차 2 (7/26) | 예외 처리하기(try/catch/finally) 실습, 로딩 애니메이션 컴포넌트화 실습

 

예외 처리하기 실습

 

코드 설명

  export interface User {
  id: string
  name: string
  age: number
  isValid: boolean
  emails: string[]
  photo?: Photo
}
  
  const [users, setUsers] = useState<User[]>([])
  const [message, setMessage] = useState('')

 

useState<User[]>([]):

• useState 훅을 호출하여 초기 상태를 설정

• User[]는 TypeScript에서 제네릭(generic) 타입으로, users 상태가 User 객체들의 배열임을 명시

• []는 초기 상태값으로, 빈 배열을 의미함. 즉, 컴포넌트가 처음 렌더링될 때 users 상태는 빈 배열로 시작함.

 

catch (error) { // error = 매개변수, 다른 이름으로 바꿔도 됨, error 객체에 에러 정보가 들어감
    if (error instanceof Error) { // type guard
      const message = '서버가 폭발했어요'
      console.error('에러..', message) // 사람이 읽을 수 있는 .message 속성을 넣어줌 / console.error('에러..', error.message)
      setMessage(message)
    }
  }

 

getUsers 함수를 사용하여 데이터를 가져오는데,

실패 시 instanceof를 사용하여 에러가 Error 클래스의 인스턴스인지 확인하고 적절한 에러 메시지를 설정함

 

instanceof란 ?
instanceof는 객체가 특정 클래스나 생성자 함수의 인스턴스인지 확인하는 데 사용하는 연산자입니다.
쉽게 말해, 객체가 어떤 타입인지 확인할 때 사용합니다.

왜 사용하는가?
에러 핸들링을 할 때, 발생한 에러가 우리가 예상하는 에러 타입인지 확인하기 위해 주로 사용합니다.
예를 들어, Error 클래스의 인스턴스인지 확인해서 그에 맞는 에러 메시지를 사용자에게 보여줄 수 있습니다.

 

타입가드(type guard)란?
TypeScript에서 특정 변수의 타입을 좁혀주는 표현식을 의미합니다. 타입 가드를 사용하면 런타임에서 변수의 타입을 확인하고, 해당 변수의 타입이 특정 타입인 경우에만 해당 코드 블록을 실행할 수 있습니다. 이를 통해 TypeScript는 코드가 안전하게 실행될 수 있도록 도와줍니다.
즉, 타입 가드는 코드가 변수의 타입에 따라 안전하게 동작하도록 돕는 도구입니다.


위 코드에서 if (error instanceof Error) 구문은 타입 가드입니다. 이는 error 객체가 Error 클래스의 인스턴스인지 확인합니다. 타입 가드를 사용하면 TypeScript는 해당 블록 안에서 error가 Error 타입임을 알게 되어, error.message와 같은 속성에 접근할 수 있게 됩니다.

 

  const [users, setUsers] = useState<User[]>([])
  const [message, setMessage] = useState('')
  
  async function getUsers() {
    try {
      const res = await fetch('https://api.heropy.dev/v0/userss')
      const data = await res.json()
      console.log('응답결과: ', data)
      setUsers(data.users)
    } catch (error) {
      if (error instanceof Error) {
        // type guard
        const message = '서버가 폭발했어요'
        console.error('에러..', message)
        setMessage(message)
      }
    }
  }
  
<div>{message}</div>

서버 주소를 의도적으로 바꿔서 에러를 발생시킨 모습 (폭팔 --> 폭발 오타*)

 

에러가 너무 빨리 발생해서 확인이 잘 안되는 경우 의도적으로 네트워크 느리게 !! Slow 3G로 바꿔줘서 확인하는 방법

 

로딩 애니메이션 컴포넌트화 실습

 

 

코드 설명

1. TheLoader 컴포넌트 가져오기

import TheLoader from './components/TheLoader'

 

 

2. 로딩 상태 설정

  const [loading, setLoading] = useState(true)
  // const [loaded, setLoaded] = useState(false)

loading 상태

• 의미: 데이터를 불러오고 있는 중임을 나타냅니다.
• 초기값: true로 설정됩니다.
• 이유: 컴포넌트가 처음 렌더링될 때, 데이터를 불러오기 시작하기 때문입니다. 이 시점에서는 아직 데이터가 로드되지 않았기 때문에 로딩 중임을 나타내기 위해 true로 설정합니다.
• 상태 변경: 데이터를 모두 불러온 후, 로딩이 끝났음을 나타내기 위해 false로 변경됩니다.

loaded 상태

• 의미: 데이터가 성공적으로 불러와졌음을 나타냅니다.
• 초기값: false로 설정됩니다.
• 이유: 컴포넌트가 처음 렌더링될 때, 아직 데이터가 로드되지 않았기 때문에 false로 설정합니다.
• 상태 변경: 데이터를 모두 불러온 후, 로딩이 완료되었음을 나타내기 위해 true로 변경됩니다.

 

3. 로딩 끝났음 표시

데이터가 이행되었든 거부되었든 여부에 상관없이 데이터를 가지고 오면 로딩 상태는 멈춰야 하기 때문에 finally에 setLoading()을 false로 바꿔주기

= 비동기 작업이 완료된 후 로딩 상태를 false로 설정하여, 로딩이 끝났음을 나타내기 위한 것

...
finally {
      setLoading(false)
    }

 

4. <TheLoader /> 컴포넌트 삽입

조건부 렌더링 : loading이라는 상태 값에 따라 <TheLoader /> 컴포넌트를 렌더링할지 말지 결정

loading이 true일 때 <TheLoader /> 컴포넌트가 렌더링 됨

<div>{loading && <TheLoader />}</div>

 

- 삼항연산자로 표현할 수도 있음

<div>{loading ? '로딩 중' : '' }</div>​

loading이 참이면 '로딩 중' 출력, 거짓이면 빈 문자열 출력(아무것도 나타나지 않는 빈 화면)

- 논리연산자 (&&)

&& 연산자는 왼쪽 조건이 참(true)일 경우에만 오른쪽의 표현식을 평가
(거짓을 찾는데 집중하는 연산자. 차례대로 조건 살펴보고 거짓이 없으면 맨 끝의 값을 출력)

 

 

로딩 애니메이션을 컴포넌트화 시키기

cf. 컴포넌트 = 재사용 가능한 UI 덩어리(조각)

App.tsx 도 컴포넌트로 재사용 가능하지만 최상위 컴포넌트이기 때문에 재사용을 하지 않는 것 뿐 !

 

코드 설명

import styles from './TheLoader.module.css';

 

CSS 모듈 파일을 임포트하면, 각 클래스 이름이 고유한 해시 값으로 변환됨

TheLoader 컴포넌트는 styles.theLoader 클래스를 가진 <div> 요소를 렌더링하는데,

이 클래스는 고유한 이름을 가지므로, 다른 css 클래스와 충돌하지 않음

 

export default function TheLoader() {
  return <div className={styles.theLoader}></div>;
}

 

className={styles.theLoader}는 css 모듈에서 정의된 theLoader 클래스를 적용함

 

 

 

코드 설명

border-top-color: transparent

 

테두리의 윗부분 색상을 투명하게 설정 --> 회전할 때 시각적으로 구분됨

animation: spinning 1s infinite linear

 

요소에 애니메이션 적용. spinning 애니메이션이 1초 동안 반복되고, 무한히 계속됨. 일정한 속도로 회전함.

 

@keyframes spinning {}

 

spinning 이라는 이름의 애니메이션을 정의

@keyframes 이란 ?

@keyframes는 CSS에서 애니메이션의 동작을 정의하는 특별한 규칙입니다. 이를 사용하여 애니메이션의 각 단계에서 스타일을 지정할 수 있습니다. @keyframes 규칙을 통해 애니메이션이 어떤 방식으로 진행될지, 시작부터 끝까지의 변화를 설정할 수 있습니다.

 

0% {
    transform: rotate(0deg);
  }

 

애니메이션 시작 지점(0%)에 요소를 0도 회전시킴

 

100% {
    transform: rotate(360deg);
  }

 

애니메이션 종료 시점(100%)에 요소를 360도 회전시킴. 이로 인해 요소가 한 바퀴 회전하게 됨

 

구현 화면 (gif 파일)

 

 

---

 

https://www.heropy.dev/p/26YKpK

CSS Animation 완벽 가이드