3월 2주차 기록

March 16, 2024 • ☕️ 3 min read

weekly

배워가기

react-query의 queryKey

react-query v4에서 queryKey는 왜 항상 배열만 받도록 바뀌었을까? 공식 문서를 찾아보니,

제네릭 리스트/Index 리소스
계층이 같은 리소스(Non-hierarchical) 리소스

에 유용하다고 한다. 무슨 말이야?

🤖 ChatGPT에 물어보았다

Uniqueness: array는 유니크한 식별자를 제공한다.
Flexibility: array를 사용하면 query key를 만드는 데 유연하다
Consistency: query key에 array를 사용함으로써 앱 전반에 표준화된 사용 방식을 제공한다
Predictability: query key를 예측 가능하게 함으로써 디버깅과 트러블슈팅에 용이하다

Ref https://tanstack.com/query/v4/docs/framework/react/guides/query-keys

react query에서 derived data(computed data) 얻는 법

useQuery의 select option을 사용한다!

Copy

export const useTodosQuery = () =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select: (data) => data.map((todo) => todo.name.toUpperCase()),
  })

여러가지 방법이 있지만, 위 방법이 가장 최적화되어있는 방법이다. 또한 부분적인 데이터 구독(subscription)이 가능하다.

Ref https://tkdodo.eu/blog/react-query-data-transformations

NoInfer 유틸리티 타입

추가적인 추론을 하지 않고 주어진 타입 내에서만 타입체크를 진행한다.
TypeScript 5.4 에 추가되었다. (지난 3/6 발표)

ex)

5.4 이전 - 타입체크 통과

Copy

createStreetLight(["red", "yellow", "green"], "blue"); // 통과

function createStreetLight<C extends string>(colors: C[], defaultColor?: C) {
  // ...
}

NoInfer 타입 활용 시

Copy

createStreetLight(["red", "yellow", "green"], "blue"); // 타입 에러 O
                                              ~~~~~~
// Argument of type '"blue"' is not assignable to parameter of type '"red" | "yellow" | "green" | undefined'.
function createStreetLight<C extends string>(colors: C[], defaultColor?: NoInfer<C>) {
  // ...
}

input radio, checkbox의 합성 이벤트 처리법

input 타입이 radio 또는 checkbox일 때 change 합성 이벤트를 dispatch하고 싶으면 ‘change’가 아닌 ‘click’을 사용해야한다.

Copy

<div onChange={() => console.log("hi")}>
  <input type="radio" />
</div>

Copy

const changeEvent = new Event("change", { bubbles: true });
input.dispatch(changeEvent); // ❌ hi 안 찍힘

const clickEvent = new Event("click", { bubbles: true });
input.dispatch(clickEvent); // ✅ hi 찍힘