- 구조분해할당에 왜 방어로직이 필요할까?
구조분해할당은 객체의 값을 간결하게 꺼내어 사용할 수 있는 좋은 기능이다.
하지만 객체 자체의 값이 비어있거나,
객체에서 구조분해할당을 할 때 값이 비어있으면 에러가 난다.
이떄 적절히 사용할 수 있는 로직을 만들어보자.
- 예시
아래는 리액트 쿼리를 사용해서 패칭을 하는 예시이다.
패칭이 완료되기 전에는 아무 값이 없어 구조분해할당 시 에러가 날것이다.
// ...
const { data, isSuccess, isLoading } = ...로직
const { rows } = data; // 패칭이 되기 전이므로 에러가 난다.
// 여기서 옵셔널체이닝으로 방어해도 이미 에러가 난 상황
rows?.map((asset: any) => {
// ...
});
// ...비동기 작업으로 위와 비슷한 상황이 많이 발생할 것이다.
그때마다 useEffect()를 사용하는 건 성능적으로도
컴포넌트의 라이프사이클에도 영향을 많이 주기 때문에,
간편하고 실용적인 방법으로 방어 로직을 구현해 보자.
- 방어 로직
1) 기본값을 사용한다.
// 값이 undefined인 경우 기본값을 대입하여 에러를 막을 수 있다.
const { rows = [] } = data;
// 하지만 data 자체가 없다면 여전히 에러가 날 것이다.2) || 연산자 사용
// data가 falsy값인 경우 기본 객체를 제공한다.
const { rows } = data || {};3) try-catch 예외 처리
try {
const { rows } = data; // 에러 발생
}
catch (error) {
console.log('error -> ', error.message);
// ... 대체 로직
}