본문 바로가기

전체 글70

[react-query] 4. react-query의 useMutation useMutation에서 mutation은 데이터베이스에 새로운 값을 추가하거나 수정, 삭제하는 사이드 이펙트를 가진 함수를 의미한다.  따라서 사이드 이펙트가 발생하는 경우 useMutation이라는 훅을 사용. useMutation과 useQuery의 차이점은 useQuery의 queryFn은 컴포넌트가 마운트 되면 자동으로 실행되지만useMutation은 실제로 mutation하는 함수를 직접 실행해줘야한다.mutate함수를 통해 mutationFn으로 등록했떤 함수를 실행할 수 있고 서버 데이터에 관여할 수 있다.  muatate()를 하면 데이터는 변경이 되지만 캐시에 저장된 데이터는 refetch를 하지 않는 이상 기존의 데이터가 그대로 저장되기 때문에 refetch를 해줘야만 변경된 데이터를.. 2024. 6. 17.
[react-query] 3. react-query의 캐싱 컴퓨터에 있는 데이터를 가져오는 것에 비해서 서버에서 데이터를 가져오는 일은 시간이 많이 걸릴 수 있다. 그런데 유저가 방금 확인한 데이터를 자주 보는 경우에 서버에서 계속 받아오기 보다는 컴퓨터 어딘가에 저장했다가 백엔드에 요청 할 필요 없이 바로 보여주는게 효과적이다. 이럴 때 캐시라는 걸 사용한다. 1.cache 캐시란 데이터를 미리 복사해놓는 임시 장소, 저장공간의 크기는 작지만 데이터를 가져오는 속도는 빠르다는 장점이 있다. 자주 사용하는 데이터를 캐시에 저장해두면 해당 데이터를 빠르게 가져와서 사용할 수 있다.  브라우저는 기본적으로 캐시를 사용해서 속도를 높이는데, 사이트에 접속해서 받은 데이터를 캐시 형태로 저장해놓고 사용자가 같은 사이트에 접속하면 저장해놓은 데이터를 유저에게 보여준다. .. 2024. 6. 17.
[react-query] 2. react-query의 status 리액트 쿼리에는 두 가지 status가 있다.query-status실제로 받아온 data값이 있는지 없는지를 나타내는 상태값useQuery()결괏값의 status값을 통해 확인 가능 fetch-statusqueryFn함수가 현재 실행되는 중인지 아닌지를 나타내는 값fetch-status값을 통해 확인할 수 있다. 1.QueryStatus query-status 는 세 가지 상태값을 가진다.success데이터를 성공적으로 받아왔을때 pending아직 데이터를 받아오지 못했을때  error데이터를 받아오는 중 에러가 발생했을 때 이 세 가지의 상태값들은 useQuery의 리턴값인 isSuccess, isPending, isError와 매칭되며 이 값들을 이용해 현재 쿼리의 상태를 알 수 있다.  const .. 2024. 6. 17.
[react-query] 1. react-query와 useQuery알아보기 간단한 사이트의 경우 데이터의 수가 많지 않아서 state와 props만으로도 충분히 만들 수 있다.하지만 대부분의 사이트는 데이터가 많기 때문에 프롭스 드릴링은 발생할 수 밖에 없는데 이러한 상황을 막기 위해 리액트 팀에서는 React-context를 만든다.데이터를 전역으로 관리하면 프롭스드릴링을 방지할 수 있지만 context의 부족한 점을 보완하기 위해서 redux / recooil 등 다양한 상태관리 라이브러리가 등장.  상태관리를 하는 데이터는 2가지로 나눌 수 있다.클라이언트 상태ui의 상태값입력 폼에 입력한 데이터 등서버 상태서버에서 가져오는 데이터를 관리서버 상태는 데이터는 몇가지 특징을 가지고 있다.비동기식 구현서버에서 데이터를 받아오기까지 시간이 걸리기 때문플레이스홀더를 보여주거나 로.. 2024. 6. 17.

티스토리툴바