220516 TIL

Redux Toolkit

yarn add @reduxjs/toolkit

으로 설치

• 역할은 기본적으로 상태관리. state를 직접 변경할수 없고 action을 통해 변경됨

• configureStore({ reducer: {} }) : 저장소인 store 생성. reducer: {} 내부에 slice reducer를 모아놓는다.

• createSlice : 리듀서+액션을 slice라 하고, 이를 생성하는 것

• useSelector : redux의 state를 가져오는 기능을 한다.

• useDispatch : 생성된 action을 발생시킨다.

React-query

서버 상태관리를 위한 라이브러리.

• 서버상태
  - fetching : 요청중인 쿼리
  - fresh : 만료되지않은 쿼리. 컴포넌트가 마운트, 업데이트되어도 데이터를 다시 요청하지않는다. 윈도우포커싱 또한 마찬가지
  - stale : 만료된 쿼리. 컴포넌트가 마운트, 업데이트되면 데이터를 다시 요청함
  - inactive : 사용하지 않는 쿼리. 일정시간이 지나면 가비지컬렉터가 캐시에서 제거.
  
• useQuery(쿼리키, promise반환 함수, query Options)

쿼리 옵션

• enabled(boolean) : 쿼리가 자동실행되지 않게 설정하는 옵션

• retry : 실패한쿼리 재시도 옵션으로 디폴트 3번시행, true설정시 무한정 재시도, false시 재시도 x

• staletime : 데이터가 fresh한 상태로 유지되는 시간. 이 시간이 지나면 stale상태가 됨. 디폴트 0.
  데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.
  fresh 상태에서는 쿼리가 다시 mount 되어도 fetch가 실행되지 않는다.

• cacheTime : inactive인 캐시데이터가 메모리에 남아있는 시간. 디폴트는 5분. 쿼리 인스턴스가 unmount되면 inactive가 된다.
  캐시타임이 지나기전에 쿼리인스턴스가 마운트되면, 데이터 fetch동안 캐시데이터 보여줌. 캐시타임은 staletime과 무관

• refetchOnMount(boolean | "always") : 데이터가 stale상태인 경우 마운트시마다 refetch를 실행하는 옵션. 디폴트는 true이고 always시 마운트시마다 매번 refetch

• refetchOnWindowFocus : 데이터가 stale일때 윈도우 포커싱될때마다 refetch하는 옵션(다른창 보고오면 그렇다고 생각하면 편하다)

• refetchOnReconnect : stale상태인경우 재연결시 refetch. 디폴트 true

• onSuccess: 쿼리 성공시 실행되는 함수. 매개변수 data는 성공시서버에서 넘어오는 response값

• onError : 쿼리 실패시 실행되는 함수.

• onSettled : 쿼리가 성공해서 데이터가 전달되거나, 실패해서 에러가 전달시 실행되는 함수.

• initialData : 이를 설정하면 쿼리 캐시의 초기데이터로 사용됨.(쿼리가 생성x이거나 캐시되지 않았을때).

etc

• 로컬에서 폴더이름 변경은 그냥 push가 안됨

git config core.ignorecase false
git mv 이전파일명 바꿀파일명

이렇게 해야 변경되더라.

• git graph extension : 브랜치가 메인브랜치에 커밋, 머지되는 걸 그래프로 확인가능.
• 머지과정은 아직은 merge>충돌수정>add>commit>push 이렇게 하자. rebase는 좀더알아보기로.