useQuery를 사용한 데이터 로딩과 옵셔널 체이닝

Todo리스트 애플리케이션에서 useQuery를 사용해 데이터를 가져오고 있었는데, 데이터가 아직 도착하지 않았을 때 애플리케이션이 오류를 뱉는 문제가 있었다.

 

 

*React의 비동기 데이터 로딩 특성 때문이라는 것은 알고 있었기 때문에 처음 filteredTodos 배열을 사용할 때 'filteredTodos && '를 통해 조건부 렌더링을 적용했다. 이 방법은 filteredTodos가 undefined일 때 오류가 발생하는 것을 방지해준다.

*React의 비동기 데이터 로딩 특성:

Reactd에서 useQuery를 사용할 때, 데이터는 비동기적으로 로드된다. 즉, 컴포넌트가 먼저 렝더링 되고, 그 이후에 데이터가 도착한다. 데이터가 도착하기 전에는 배열이 담긴 변수는 undefined 또는 초기값이 된다. 이 상태에서 map(), length 같은 연산을 수행하려고 하면 TypeError: Cannot read properties od undefined (reading 'map') 혹은 TypeError: Cannot read property 'length' of undefined 와 같은 오류가 발생한다.

 

 useQuery가 반환하는 isLoading 상태를 이용하여 플레이스 홀더 표시할 수도 있다.

const { data: todos, isLoading } = useQuery('todos', getTodos);

if (isLoading) {
  return <div>Loading...</div>;
}

 

 

하지만 더 간결한 방법이 있다면 사용하고 싶었다. 그리고 옵셔널 체이닝이라는 기능을 알게되었다.

 

옵셔널 체이닝

'?' 연산자를 사용하면, 객체나 배열이 null이나 undefined인 경우에도 안전하게 접근할 수있었다.

예를 들어, filteredTodos.length를 호출하기 전에 filteredTodos?.length를 사용하면  filteredTodos가 존재하지 않을 경우에도 오류없이 undefined를 반환하게 만들 수 있다.

위 코드에서 filteredTodos가  null이나 undefined이면 결과는 undefined가 된다. 그렇지 않은 경우 실제 값을 얻게 된다.

 

Q. 논리 AND (&&)를 사용한 방법과 옵셔널 체이닝을 사용한 벙법의 결과는 완전히 같은가?

'?.' (옵셔널체이닝)연산자와 &&(논리 AND) 연산자는 유사한 점이 있지만 완전히 같지는 않다고 한다.

옵셔널 체이닝은 오로지 null이나 undefined인 경우에만 undefined를 반환한다. 그 외의 falsy한 값에 대해서는 해당 속성을 계속 평가한다. null이나 undefined인 경우에만 동작을 멈춘다.

       사용 예: obj?.property

 

반면 && 연산자는 null, undefined, falsy, 0, "", NaN 등 어떤 falsy한 값에도 동작을 멈추고,  해당 falsy값을 을 반환한다. 그렇지 않으면 &&의 오른쪽 피연산자를 평가하고 반환한다.

       사용 예: obj && dbj.property

 

그래서 옵셔널 체이닝은  객체가 null이나 undefined인 경우의 안전한 속성 접근에 더 특화되어있는 반면, && 연산자는 두 조건의 평가 결과에 따라 값을 결정하는 데서 더 자주 사용된다고 한다.

 

 

최종적으로는 아래와 같이 수정하였다. isLoading 상태를 이용하여 플레이스 홀더도 추가하여 일시적으로 데이터가 없는 경우에도 사용자에게 로딩중임을 알려준다.