6월 7일 학습 목표
props의 실체
props는 함수의 매개변수 였다
실존하는 것은 아님 (aaa로 사용할 수도 있음)
el의 실체
함수의 매개변수이기 때문에 이름을 바꾸어도 된다
quiz
prev의 실체
graphql의 실체
2번 작성하는 이유
여러개를 묶어서 한 번에 요청하기 위해 재사용
rest-api 와의 차이점 : 묶음 요청이 가능함
1번에 원하는 패치 내용을 모두 요청 가능
rest api의 언더페칭/오버페칭 문제점을 해결할 수 있음
🔥 언더페칭 문제점
특정 페이지에서 패치 보드, 패치 프로필, 패치 프로덕트 등을 필요로 할 때 => rest 에서는 3번 패치 (언더페칭)
🔥 오버페칭 문제점
rest-api에서는 내가 원하는 데이터 이상의 데이터를 받아올 수 밖에 없음
( Ex. board 데이터 중 title만 필요함 -> 하지만 writer, createdAt, contents등을 모두 받아와야함 )
global state
어디서든 꺼내올 수 있는 state만들기 (어떤 component에서도 보일 수 있게)
특히! 로그인 정보 ~~> global state 사용하지 않으면 모든 페이지에서 state를 만들어야 함
api로 받아온 정보
🌟 즉, 다른 컴포넌트에서 재사용 가능한 정보는 global state 활용하기!
사용 : Redux (Redux toolkit - 최신업그레이드) -> Mobx -> SWR-> React-Query + Recoil
React-Query : api로 받아오는 정보를 g.s에 저장 -- 반복하다보니 라이브러리로 만들어 사용하게 됨 (자동화)
api로 받아오지 않는 것은 활용할 수 없음 -> 나머지로 활용
Recoil : 미니 Redux / 직접 만들어서 저장해야 하는 globalState 활용시 사용
useQuery가 데이터를 요청 -> 받은 데이터 globalState에 저장 -> g.s에서 data로
1. data가 바뀌면 화면이 리렌더링 된다
2. 동일한 쿼리를 다른 컴포넌트에서 사용할 시 백엔드에 재요청이 가지 않음
왜? 글로벌스테이트에 이미 임시 저장(캐시)되어 있으니까 => 없으면 api 요청 후 g.s에 저장 => 해당 컴포넌트로 뿌려줌 (fetchPolicy - 1. cache-first)
3. key가 api 이름이다
fetchPolicy (정책)
1. cache-first : 글로벌스테이트에 있는지 확인 후,
있으면 바로 가져오고 없으면 api 요청 후 글로벌 스테이트에 저장하고 가져오기
2. network-only : 글로벌스테이트에 있든 없든, 항상 새롭게 api 받아오기
오늘공부를돌아보며
아.. 그럼...이제 다 글로벌스테이트로 리팩토링해야하는거구나???????????????????
