오늘은 React와 TypeScript를 사용하여 컴포넌트의 props 타입을 정의하고, 이를 통해 발생할 수 있는 타입 에러를 해결하는 방법에 대해 알아봄. 특히, webpack에서 발생하는 컴파일 에러를 해결하기 위해 여러 가지 방법을 시도함.
TIL1) React Query 소개:
React Query는 서버 상태 관리 라이브러리로, 데이터 fetching, caching, synchronizing, updating 등을 간편하게 처리할 수 있도록 도와준다.
클라이언트 사이드에서 비동기 요청을 관리하는 데 유용하며, API 호출의 복잡성을 줄여준다.
TIL2) QueryClient 및 QueryClientProvider:
QueryClient를 생성하여 React Query의 설정을 관리합니다.
QueryClientProvider로 애플리케이션의 루트 컴포넌트를 감싸서 하위 컴포넌트에서 React Query를 사용할 수 있도록 합니다.
TIL3) useQuery 훅 사용:
useQuery 훅을 사용하여 데이터를 fetching
첫 번째 인자로 쿼리 키를, 두 번째 인자로 fetch 함수를 받는다.
쿼리 상태(loading, error, data 등)를 쉽게 관리할 수 있다.
TIL4) useMutation 훅 사용:
useMutation 훅을 사용하여 데이터 변경(POST, PUT, DELETE 등) 요청 처리.
성공적으로 요청이 완료된 후 onSuccess 콜백을 통해 캐시를 업데이트할 수 있다.
TIL5)쿼리 무효화 및 리패칭:
invalidateQueries 메소드를 사용하여 특정 쿼리를 무효화하고 다시 fetching할 수 있다.
데이터가 변경된 후 최신 데이터를 반영하기 위해 쿼리를 리패칭하는 것이 중요하다.
Learned
오늘은 React Query를 처음으로 제대로 사용해본 날이었다. 사실 그동안 REST API와 Redux를 사용해 상태 관리를 해왔기 때문에, React Query라는 새로운 도구가 조금 낯설게 느껴졌다. 하지만, 오늘 하루 동안의 경험을 통해 왜 많은 개발자들이 React Query를 선호하는지 이해할 수 있었다.
React Query와의 첫 만남
처음에는 공식 문서를 읽으며 시작했다. React Query는 서버 상태 관리를 간편하게 만들어주는 도구라고 설명되어 있었다. 특히, 비동기 데이터를 캐싱하고, 자동으로 데이터를 갱신하며, 로딩 및 에러 상태를 관리하는 데 강력한 기능을 제공한다고 했다. 이 모든 기능이 단순한 훅(hook) 하나로 가능하다는 점이 좋았다.
그냥그냥
한강 소설 꽤 여러개 읽을때마다 느낀건, '인간은 나약하지만 이겨내려 한다'
이런 생각이 들었다.
위 사진 'If you were able to live as you desire, what would you do with your life?'
나의 답변) 모르겠다. 사는것도 어디야,
