02 / 10 Today I Learned (TIL)

rest-api의 오버페칭, 언더페칭

오버페칭: 필요없는 모든 데이터를 전부 받아오는 과정
언더페칭: 여러종류의 api를 한개씩 여러번 받아오는 것

GraphQl은 사실 rest-api의 post 방식에서 data를 넣을 수 있음을 이용해 만들어낸 방식
이로인해 언더페칭과 오버페칭문제를 모두 해결

---

글로벌 스테이트

props-drilling(props로 하위 컴포넌트한테 전달하는 방식)을 하지 않고 전역상태관리(global state)로 바로 필요한 값을 넘기는 방식
사용 툴로는
Redux-tool-kiy + RTKQuery,
ReactQuery + recoil,
ApolloClient + recoil
등이 존재 하며 ApolloClient + recoil 툴을 사용하는 방법을 배웠다

export const countState = atom({
  key: 'count', 
  default: 0,	//	기본값
});

import { countState } from "/해당 countState의 위치/";

function TextInput() {
  const [count, setCount] = useRecoilState(countState);

  const onClickCount = () => {
    setCount((prev) => prev + 1)
  };

  return (
    <div>
    	<button onClick={onClickCount}>증가</button>
      {count}
    </div>
  );
}

위와 같이 사용하며
Atom(countState)의 변화가 있으면 해당 Atom(countState)를 참조하고 있는 모든 컴포넌트에 리렌더링이 일어난다