220607 프론트엔드 부트캠프 28일차 : 다 함수야!, graphql 궁금, globalstate

  props, prev, graphql 의 진실 (?) 

함수형 컴포넌트는 진짜 함수다.
props는 함수의 매개변수, 부모에서 자식으로 인자를 넘기는 것.

prev또한 이름 prev아니여도 상관없음

밑줄친 것들만 이름이 같으면 ok

api 여러개 묶어서 한 방에 요청

맨 위의 $asdf 재사용하기 위해서 쓰는 것

asdfasfaas는 그룹이름이어서 뭘로 하든 상관은 없다.

rest api는 묶음 배송 불가~ -> 문제점 발생

1. under fetching
세 개의 패치 api 요청해야하는데, rest는 세 개 한 번에 못하고 하나씩밖에 못 보내. 하나씩 밖에 못 보내니까 내가 원하는 것보다 조금밖에 패칭이 안된다. (??여기 잘 이해가 안됨 내가 생각하는 게 맞나?)
-> 찾아보니 정확한 뜻은 하나의 endpoint로 필요한 모든 데이터 요청을 처리하지 못한다는 걸 의미한다고 함.

2. over fetching
Rest는 요청하는 부분만 따로 요청할 수 없고 모든 데이터를 다 받아와야 한다. 그래서 원하는 데이터보다 over fetching되며, 이는 불필요한 데이터 호출, 불필요한 서버와 네트워크 자원 사용을 야기한다.

이를 해결한 게 graphql-api

위에 있는 것 밑에처럼 쓸 수 있음

이렇게 보내서

이렇게 쓰기 가능

  Context provider 

context를 이용하면 일일이 props를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.
그러나 context를 사용하면 컴포넌트를 재사용하기 어려워지므로 필요할 때에만 써야한다.

React.createContext(null);

Provider에 의하여 감싸진 컴포넌트라면 어디서든 context의 값을 조회하고 사용할 수 있다.

사용법

// _app. (최상위 컴포넌트) 에서
import { createContext, useState } from "react";

export const GlobalContext = createContext({
  isEdit: false,
  setIsEdit: (_: any) => { }
});

// _app. 의 MyApp 밑에
const [isEdit, setIsEdit] = useState(false);

// 사용하고자 하는 하위 컴포넌트에서

import { useContext } from "react";
import { GlobalContext } from "../../../../_app";

const { isEdit, setIsEdit } = useContext(GlobalContext);

// ex. new 페이지에선 등록하기 로 보이게 하고 싶다면, new 에서
useEffect(() => {
    setIsEdit(false);
  }, []);

// new/update가 공통으로 쓰는 write presenter에선 isEdit의 상태에 따라 값을 다르게 보여주면 된다. 
{isEdit ? "수정하기" : "등록하기"}

여기서 GlobalContext는 사용자가 지정할 수 있는 이름임!

  Global State - ApolloCacheState

ContextAPI라는 것을 활용할 수도 있고, Redux 또는 ApolloClient의 ApolloCacheState를 활용할 수도 있다.
수업 시간에선 ApolloCacheState를 배웠다.

redux → mobX → SWR → React-Query
api로 받아오는 데이터들에 대해서 글로벌 스테이트에 저장해야하는데, 이거 자동으로 해줄게! (리액트 쿼리)
+Recoil / Apollo-Client + Recoil
Redux tollkit (업그레이드 됨) 기존 리덕스는 엄청 복잡했음

React-Query + Recoil
Apollo-Client + Recoil
이렇게 쓴다.

요청해서 받아온 걸 data에게 바로 주는 게 아니라 글로벌 스테이트에 주고 거기서 data에 주는 방식
1. data도 state다. data가 변하면 컴포넌트 리렌더링이 일어난다.
2. 동일한 쿼리를 다른 컴포넌트에서 사용할 시, 백엔드에 재요청이 가지 않는다.
-> 글로벌 스테이트에 이미 저장이 되어있기 때문에 그걸 뽑아서 사용하면 돼서 백엔드에 두 번 요청하지 않음

yarn add recoil

3. 여기서 updateQuery 같은 key가 API 이름이다.

글로벌 스테이트에 있는지 없는지 확인 후, 없으면 그때 API 요청한다.

ApolloClient는 ApolloCache라는 state를 가지고 있고 여기에 컴포넌트에서 호출하는 API의 결과값 데이터가 담기게 한다.

fetchPolicy 설정하는 법, 지정하지 않으면 default는 cache-first

fetchPolicy 정책

1. cache-file - 글로벌 스테이트에 저장되어 있는 것 있으면 그걸 쓸거야!
2. network-only - 저장되어 있더라도 무조건 새로 가져와야해!

글로벌 스테이트에 임시로 저장되어 있는 것 - 캐시, 클라이언트 캐시

Recoil 미니리덕스로 보면됨. 리덕스를 대체하는 건 어렵다.

왼쪽에 있는 isEdit과 오른쪽에 있는 isEdit은 같다.

useRecoilState(저장소 이름); 여기 있는 isEdit랑 setIsEdit 가져와라

오늘 점심 윤쉪~

아침에 졸려서 컴포즈 커피까지 가서 흑당라떼를 사왔는데 정말 저스트 라떼였다.ㅎ 그냥 우유에 흑설탕 타먹기~ㅠ... 버블이라도 있으면 좋았을텐데! 타이거 슈가 먹고싶다..!@!@!@ 아무튼 1,2교시 힘차게 졸아버렸다... 쉬는 시간에 자고 싶었지만 참고 잠깨려고 나갔다오기까지 했는데 ㅠㅠㅋㅋㅋ 계속 졸렸어... 정말 놀랍게도 pf님이 초콜릿 주신 거 먹자마자 괜찮아졌다. ㅎㅏ하~

열품타랑 스톱워치 시간 재는 거 둘 다 하다보니까 둘 중에 하나를 자꾸 안하게 된다..ㅠㅠㅎ 둘 다 누르기 너무 귀찮아요!!! 그래도 내일부턴 다시 제대로 재야겠다,,, 한동안 기록 중독처럼 살다가 갑자기 나태해졌어... 엊그제부터 오늘까지 진짜 너무 여유롭게 살았다..! 오늘은 ㅈㅇ이 만나서 모코코 스티커도 받고 좋았당 히히 그리고 집에서 캠스하니까 집중 꽤 잘 됐는데... 됐는데! 저녁 먹고 약간 해이해짐. 아, 이제 데스크탑에서도 작업할 수 있게 설정해놔서 좀 편해졌다! 그래도 내일은 학원에서 하다가 집 와야지,,, 요새 집에 뭐 있는 거 마냥 맨날 일찍 왔어... 😭 아 그리고 알고리즘이 갑자기 너무 어려워진 느낌...! 풀이들을 땐 헐, 아~~~ 이거군 하다가도 문제보면 머릿속이 어두워

오늘 포트폴리오 추가한 것 - 회원가입창, 로그인창, 간단한 이메일 검증, 스크롤바/드래그 영역 커스텀

애니메이션 이것저것 해봄

할 것 - 커비에 transform 적용해보기! 레이아웃 수정, 보드 리스트 페이지네이션 첫 페이지가 9까지인 것 수정