20220708 TIL

1. inactive vs active (react-query)

 - 같은 키를 가진 캐싱된 query중에서 가장 최근에 fetching한 쿼리 값은 active 나머지는 inactive 상태임.

 

2. invalidation vs refetch (react-query)

 - query의 상태를 mutation으로 변경한 뒤 해당 쿼리를 다시 서버에 요청해야할 때 invalidation과 refetch를 사용할 수 있다. 

 - invalidation은 해당 쿼리를 stale한 상태로 변경하는 것으로 새롭게 refetch를 하게 하고, refech는 같은 queryKey로 서버에 다시 데이터 요청을 한다.

 - 둘 다 새롭게 데이터를 요청하는 것은 같으나 동작이 미묘하게 다르고 usecase도 다르다.

 - 페이징 된 리스트 값에서 특정 페이지만 불러오고싶을 때는 둘 다 사용해도 괜찮다.

 - 페이징 된 리스트 값이 삭제되어 모든 페이지의 구조가 변경되야 할 때는 refetch보다는 invalidation을 하는게 낫다. refetch는 모든 페이지의 데이터를 불러오지만 invalidation은 우선 query를 stale하게만 만들기 때문에 페이지의 변경시에만 특정 데이터를 가져온다.

 

3. 구조분해 할당에서 초기값

 - 구조분해 할당에서 초기값을 넣어주는 경우가 있다. 이때 초기값이 들어가는 상황은 해당 변수가 undefined값을 가질 경우만이다 null은 해당하지 않는다.

interface Fruit {
	apple?: string;
	orange: string | null;
}

const myFruit: Fruit = {
	orange:null;
}
const {apple = "사과"} = myFruit; // apple은 myFruit에 없으므로 (undefined) 초기값 "사과" 할당
const {orange = "오렌지"} = myFruit; // orange는 null 이므로 초기값 "오렌지" 할당 X