React Query로 가져온데이터 typescript로 사용할때 질문있습니다 !

Question

React-Query로 데이터를 가져왔을때 response형식을 정해줘도 DataType | undefined 로 나오는 부분을 사용할때

const { name } = data?.user ?? {}

1. 이런식으로 사용하는데 옳게 사용하는것일까요?

2. 아니면 혹시 더 옳바른 사용 방법이 있을까요?!

3. 저 구문에서 ?? 연산자가 앞에께 null, undefined일때 뒤에것을 반환하는 것으로 알고있는데 그럼 const { name } = {} 라는 구문이 되는데 뭔가 좀 이상한거같구…. 혼란스러운데 맞는걸까요? 저 구문이 이해가 잘 안가서 혹시 설명해주시면 감사하겠습니다 😭😭

이승현 · Answer

1. 일반적으로는 상황에 따라 다릅니다만, 하나의 record만 있는 위의 경우, TypeError를 막을 수 있는 괜찮은 방법 입니다.

2. 어떻게 data를 사용하느냐에 따라 달라질 수 있을 것 같습니다. 예를 들어 data안의 객체 자체를 의존성 배열에 넣게 되는 경우, ?? 이후에 [] 나 {} 가 오면 매 rendering 마다 다른 객체로 평가됩니다. 위의 경우는 name만 사용하고 data가 undefined일 때, undefined가 되기 때문에 이런 문제가 없습니다. (undefined는 primitive라서 다른 객체에서 얻은 값이라 하더라도 의존성 배열에서 변하지 않은 것으로 평가합니다.)

3. const { name } = {} 은 2. 에서 말씀드린 것처럼, name 에 undefined가 구조 분해 됩니다. 구조 분해시 프로퍼티의 이름에 해당하는 프로퍼티가 대상 객체에 없으면, undefined가 할당됩니다~!