📔 학습목표
- REST와 Graphql 차이 >> Under-Fetching/Over-Fetching
- 글로벌 스테이트? >> Recoil
지난 시간 포트폴리오 리뷰
게시판에 search 기능
디바운싱
리패치를 디바운스 안에서 처리
카운트도 리패치를 해줘야 함
왜? 마지막페이지와 다음페이지를 어디까지 가져와야하는지 계산할 수 있음.
마지막 페이지 총 개수가 변해야 한다.
빨간글씨를 프리젠트로 넘겨줘야 한다.
시크릿코드를 통해 토큰 저장
search : strig이 추가되있는지 확인!!!
refetchBoardCount에는 왜 페이지가 없는지?
A. 전체 페이지를 구하는거라서
props의 실체
함수형 컴포넌트는 그냥 함수였다
props 라는 건 함수의 매개변수라는 사실
함수와 컴포넌트의 차이점
🔎 컴포넌트는 return 값으로 JSX가 반환되어야 합니다.
주는 애가 인자 (argument)
받는 애가 매개변수 (parameter)
props라는 건 실존하는게 아님
el의 실체
맵이 배열의 갯수만큼 함수를 실행시켜준다
el와 index가 매개변수
철수, 영희,훈이는 인자(arg)
함수의 매개변수는 이름이 지정되있는게 아니라
우리가 지정해도 된다.
퀴즈
index에는 철수가 들어가게 된다.
함수의 매개변수는 인덱스건 무엇이건
prev의 실체
꼭 프리브여야 하나?
꼭 프리브가 아니여도 된다
graphql variables의 실체
결국 셋의 이름만 공통되면 된다.
writer가 두개 있는 이유?
묶어서 요청할 때
재사용 할수 있는 건 재사용할라고
다섯번 요청해야 할 때
Graphql은 묶어서 요청할 수 있는데
REST API는
다섯번 요청해야 한다.
이름은 뭘로 사용해도 상관없다.
언더페칭
: 더 패칭해야하는데 조금밖에 못한다.
예시)
특정페이지에서 fetchProfile, fetchBoard, fetchProduct
REST API는 각각 따로 따로 세번 요청해야 한다.(언더페칭)
-> REST API의 언더페칭 문제점
반면에 Graphql은 한 번에 묶음 요청이 가능하다
한 번 요청에 세 개의 원하는 결과를 받아올 수 있다.
즉, REST API의 언더페칭의 문제를 해결한 게
Graphql API이다!!!
오버페칭
: 내가 원하는 거 이상의 결과를 받아온다.(골라서 받아올 수 없다, 주는대로 받아와야 한다)
REST API의 오버페칭 문제를 해결한 게 Graphql API이다!!!!
프롭스가 aaa로 이름이 바껴도 실행이 된다
말 그대로 Child 페이지는 함수고
부모페이지의 리턴안의 값은 그 결과값
결론 : 함수형 컴포넌트는 그냥 함수를 만들고 호출하는거였구나~
결과
el.index이 매개변수라면
다른 거여도 상관없다.
결과는 위와 같다.
\
이름은 중요하지 않고 매개변수로 들어온다는 거를 알고가자
prev state
global state
각각의 컴포넌트에서 공통된 스테이트를 global state에 정의해주면 편리하다
어떤 컴포넌트에서도 다 보여줄 수 있게끔
그렇지 않으면 각각의 컴포넌트에서 usestate를 해줘야 한다.
그렇게 되면 비효율적이기 때문에 그걸 방지하기 위해 global state에 공통된 것들을 정의해준다.
global state에 넣을만한 것들 - 로그인 정보, openAPI 등등
여러군데서 재사용될 수 있는 state들을 global state들에 넣어준다
즉, state가 재사용 될 수 있다? 그럼 넣기~
global state 관리..?
Redux(리덕스)
이미 있는 값을 뽑아서 쓴다....음..
-> MobX(모벡스)
-> SWR
-> React-Query
api로 받아오는 데이터들에 대해서 global state에 저장해줘야 되는데
그게 매번 반복되다보니까 아 그냥 라이브러리로 해줄게~ (자동화 되어있다)
해서 나온게 리액트 쿼리임
보통 리액트쿼리 하나만 쓰는게 아니라 두개를 병행해서 사용
근데 리덕스 모벡스 swr은 용량이 크다? 암튼 그래서
미니 리덕스버전으로 나온게 recoil
React Query + Recoil+ / Apollo-Client + Recoil
둘다 유즈쿼리랑 유즈 뮤테이션을 사용한다.
아폴로 클라이언트도 유즈쿼리에 대한 글로벌 스테이트도 자동으로 처리해준다? 흠..
멘토님 말씀이 빠른걸까...내 뇌가 느린걸까...
리덕스 툴킷
기존리덕스랑 변경이되서...최신 리덕스임
기존 리덕스는 너무 복잡함
자동화 되어있진 않음 그러나 기존 리덕스보단 나음
-
데이터가 바뀌면 화면이 리렌더링 된다.
-
동일한 쿼리를 다른 컴포넌트에서 사용할 시,백엔드에 재요청이 가지 않음.
옛날에는 이렇게 직접 다 적음
하지만 요새는 리액트쿼리랑 아폴로 클라이언트에 의해 자동으로 처리된다.
❗️❗️❗️❗️하지만, 문제점도 있다
fetchBoards: []
react query _ recoil
글로벌스테이트에 있으면 가져오고
없으면 요청해서 받게되면 그거 글로벌 스테이트에 저장하고
다시 데이터라는 이름으로 뿌려준다.
--> 이 정책을 fetchPolicy
= 임시 저장했다.
패치폴리시의 기본값은
1. cache-first
글로벌 스테이트에 패치된게 있는지 없는지 확인하고
있으면 가져와서 사용
- network-only
글로벌스테이트가 있든 말든 ~할때마다 백엔드에서 새로 불러와줘? 이런뜻..
아묻따 가져와줘
리코일로는 리덕스를 대체할 수는 없다
리덕스랑 동일하게 쓸라면
리액트쿼리나 아폴로 클라이언트라 같이 사용해야 한다.
여기있는 이즈 에디트랑 펑션을 써라
글로벌스테이트를 use리코일 스테이트에 넣어준다..
가운데다 두고 누군지든 쓸수있음
yarn add recoil
여러 컴포넌트에 똑같이 쓰이는 게 있으면... 같은 파일 안에서 정리
