프론트엔드 - 17

글로벌 스테이트 (global State)

• 사이트를 만들다 보면 하나의 state를 여러 페이지에서 필요로 하는 경우가 있음

• 이 때 매번 필요한 state를 컴포넌트에서 만들고 props로 넘겨주는 것이 아닌, 전역에 state를 두고 필요할 때마다 가져와서 쓰는 것이 글로벌 스테이트 방식임
  
  
  *이런 전역상태관리(global State) tool로는 contetx-Api, Redux, Recoil 등이 있음

fetchPolicy (서버 데이터의 전역 저장)

const GLOBAL_STATE = new InMemoryCache();

~~~ 생략

const client = new ApolloClient({
    link: ApolloLink.from([uploadLink]),
    cache: GLOBAL_STATE, // 컴퓨터의 메모리(ram)에 백엔드에서 받아온 데이터를 모두 임시로 저장해두기 (ex. fetch로 받아오는 {data})
  });

• Apollo-client 는 global State를 만들어두면 apollo-Cache 라는 곳에 저장됨
  
  
  

• 즉, 예를 들어 A컴포넌트에서 useQuery로 data를 받아오면 이 data가 바로 컴포넌트로 넘겨지는 것이 아니라 Apollo-Cache에 저장된 이후 컴포넌트로 넘어 감
  
  

• 이후 B컴포넌트에서 똑같은 data 를 요청하면, 먼저 Apollo-Cache 로 가서 저장된 data 여부를 확인한 다음 있으면 해당 data를 가져오고, 없다면 백엔드에 요청하여 해당 data를 컴포넌트로 보내 줌
  
  
  *이를 Apollo-client의 fetchPolicy (fetch 정책)이라고 함
  
  

  *fetch 시 useQuery의 두번째 인자에 {fetch-policy}를 넣어서 캐시의 저장여부에 대한 설정이 가능!!
  [캐싱되어있는지 먼저 확인할지, 바로 백엔드에서 데이터를 받아와서 최신화 적용할 것인지..등등]
  
  
  ex.
  cache-first => 캐시에 있는지 먼저 확인 (default 값)
  network-only => 캐시의 여부 상관없이 무조건 백엔드에 요청

Recoil (로컬 데이터의 전역 저장)

• 프론트에서 자체 생성되는 데이터를 전역에 보관할 수 있도록 해주는 라이브러리

1. 설치

yarn add recoil

2. Recoli 세팅

//app.tsx 파일 
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
		//RecoilRoot로 모든 컴포넌트를 묶어주세요
      <Component />
    </RecoilRoot>
  );
}

• <RecoilRoot> 로 묶은 컴포넌트 안에서만 recoil 사용 가능

3. Atom 으로 초기값 설정

// Atom
const textState = atom({
  key: 'textState', // state의 이름
  default: '', //초기값
});

• 각 컴포넌트들이 참조하고 있는 atom에 변화가 있으면, 해당 atom을 참조하는 모든 컴포넌트는 리렌더링이 일어나게 됨

4. useRecoilState 로 atom 활용

// TextInput 컴포넌트 
function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

• export 한 atom (textState)을 useRecoilState를 이용해 초기값으로 지정해줌

• 위와 같이 작성하면, (textState)를 참조하고 있는 모든 컴포넌트에서 리렌더링이 일어나게 됨

+a) 글로벌 스테이트 사용 트렌드 3가지

(3가지 중 한가지 방식 사용)

1. Redux-toolkit + Redux-toolkit-query
      
2. react-query + Recoil [rest-api용]
      
3. apollo-client + Recoil [graphql 용]