[TIL] 220802 코드캠프 22일차

포토폴리오 리뷰

BoardList.presenter → Serchbar.container → Searchbar.presenter
BoardList.container → BoardList.presenter (props)

const { data, refetch } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  const { data: dataBoardsCount, refetch: refetchBoardsCount } = useQuery<
    Pick<IQuery, "fetchBoardsCount">, 
    IQueryFetchBoardsCountArgs
  >(FETCH_BOARDS_COUNT);

const onChangeKeyword = (value: string) => {
    setKeyword(value);
  };

⬇ props

const getDebounce = _.debounce((value: string) => {
// props는 boardlist.presenter가 주고있음, boardlist.container가 presenter에게 props
    props.refetch({ search: value, page: 1 });
    props.refetchBoardsCount({ search: value });
    props.onChangeKeyword(value);
  }, 200);

전체 게시글 : 96 → 총페이지 10
검색결과 게시글 : 22 → 총페이지 3

• 10 : refetch(fetchBoards)
• 22 : refetch(fetchBoardsCount)
  
  

props, data, prev, el

props

import Presenter from "./Presenter.presenter"

export default function Container() {
  return Presenter({count:123})
}

export default function Presenter(aaa) {
  return <div>{aaa.count}</div> // props -> aaa 
}

el

//함수의 선언
const getProfile = (aaa,bbb)=>( // el, index 
		console.log(`${aaa}는 ${bbb}입니다.`)  // el, index
	)

//함수의 실행
getPrfile("훈이",2)

prev

setCount (Asdf ⇒ asdf +1)

props, prev, el은 다른 인자,매개변수로 선언해도 동일한 값을 출력하는 함수가 실행되지만 관례이기 때문에 마음대로 변경하면 협업 때 혼란을 일으킬 수 있음..!

글로벌 스테이트(Global State)

GrahQL 장점

1. 골라받기 가능

• RestAPI는 10개 다 받아와야함 (RestAPI의 Over- Fetching문제)

2. API 묶음요청 가능

• RestAPI는 3개를 요청하고 싶을 때 각각의 요청을 별개로 보내야함 (Under-fetching)

global-state안에 있는 저장공간 : store

• Redux → MobX → React Query (REST API)(useQuery, useMutation),
  Apollo Client(useQuery, useMutation)

fetchPolicy

fetchUser로 철수,12세를 저장해서 Redux에 저장

→ 다음페이지에 갔을 때 fetchUser를 하는게 아니라 Redux에 데이터가 있는지 확인하고 있으면 가져오고,
없으면 요청

fetchPolicy의 기능

• “cache-first” ::default:: → 캐시에 있는지 먼저 확인
• cache-only → 캐시에만 감 , 캐시 없으면 요청 x
• “network-only” → 캐시에 있든 없든 무조건 백엔드에 요청

Recoil

로그인 때 token 으로 로그인 되어있는지 모든 컴포넌트에서 확인하므로 필요