React Query
isFetching
비동기 쿼리가 해결되지 않았음을 의미
캐시가 있어도 계속 보임
isLoading
isFetching은 참인 상태 쿼리에 대해 캐시된 데이터가 없음 isFetching의 하위
stale data
만료된 데이터
데이터 리페칭은 만료된 데이터일 때만 실행됨
staleTime
얼마까지 만료된데이터로 둘건지 리페칭할 때 고려사항
기본값이 0ms인 이유
데이터는 항상 만료된 상태여서 서버에서 다시 가져와야한다는 이유
cacheTime
데이터가 비활성화된 이후 남아 있는 시간
유효시간의 기본값은 5분
캐시된 데이터는 쿼리를 다시 실행했을 때 사용됨
데이터가 최신 상태인지 서버에서 확인하는 동안 사용자에게 보여지게 됨
pagination
쿼리키를 배열로 넣으면 의존성 배열처럼? 작동할 수 있음 그래서 쿼리키가 바뀔 때 마다 데이터를 새로 가져옴
prefetching
데이터를 미리가져와서 캐시에 저장하면 유저가 기다리지 않아도 돼서 사용성이 좋아짐
기본값으로 만료(stale)상태
Mutation
변경하거나 삭제할 때 사용
infinite Scroll
useInfiniteQuery사용
쿼리함수를 사용하여 첫 페이지를 가져옴 (useInfiniteQuery의 두번째 인자고 pageParam을 파라미터로 받음)
데이터가 반환된 후 React Query가 getNextPageParam을 실행 페이지파람을 업데이트하는 것임
아래 두 개는 InfiniteScroll 컴포넌트에 줌
hasNextPage pageParm 정의되어 있으면 다음페이지로 감(boolean)
fetchNextPage 트리거
컴포넌트 내 코드 실행 순서
Mounting 첫 렌더링
마운트가 된 이후componentDidMount
Updating 렌더링 후 (새로운 프롭스를 받았을 때, 스테이트가 변경되었을 때 등) 업데이트될 때
업데이트 이후 componentDidUpdate
Unmounting 컴포넌트가 브라우저에서 사라지면
언마운트 직전 componentWillUnmount
useEffect 내에서 일어나는 일들임
state를 batching 처리한다는 것은?
한꺼번에 일괄처리하는 것임
각각 변경 및 리렌더링하지 않고, 한꺼번에 처리해서 리렌더링을 한번만 하는 것
useQuery은 useEffect처럼 컴포넌트가 리턴한 후에 실행됨
state변경하는게 내장되어있음 query function이 실행된다음에 내장된setState가 실행됨
npm start 오류
오류 메세지
ERR_OSSL_EVP_UNSUPPORTED
package.json 파일에 script에서
start와 build를
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",이렇게 바꿔주고
npm --openssl-legacy-provider start
npm --openssl-legacy-provider build이렇게 실행하니 잘 작동한다.
node.js의 버전 문제인 것 같은데, 영어를 못해서 대충만 알았다.
https://roytuts.com/how-to-fix-err_ossl_evp_unsupported-in-react-js-application/
참고한 블로그
강의 때문에 받은 자료에서 일어난 오류여서 직접 코딩하는 프로젝트에서 볼 일은 적겠지만, 나중에 또 자료를 받아서 사용할 때 이런 문제가 생기면 TIL을 꺼내보면 될 것 같다.
