[TIL] 과제 전형 진행

TIL

과제 전형 진행

구현

recoil

recoil이란?

facebook에서 만든 전역 상태 관리 툴이다. React 전용으로 만들었고, 따라서 React 친화적이다.
공식 문서에는 작고 가볍다고 적혀있다.

특징은 redux보다 훨씬 간결한 코드로 전역 상태를 관리할 수 있게 된다.

또한, 비동기 처리가 매우 간단하여 미들웨어가 필요한 redux와 달리 비동기 처리가 쉽다.

동시성 모드(Concurrent Mode), Suspense와 같이 최신 문법 또한 지원하여 React와의 최적화가 잘 되어있다.

RecoilRoot

Provider 역할. 상태를 공유할 컴포넌트의 가장 상위에 둔다.

function App() {
  return (
    <RecoilRoot>
      <AppBox>
        <GlobalStyles />
        <AppRoutes />
      </AppBox>
    </RecoilRoot>
  );
}

atom

Recoil 상태의 단위이다.
redux에서 store와 비슷하다.

RecoilRoot 컴포넌트 내에 있는 모든 컴포넌트 간에 이 상태는 구독 및 업데이트가 가능하다. (당연히)

atom의 상태가 업데이트되면, 상태를 구독하는 컴포넌트들이 모두 리렌더링된다.

구현

src 폴더 내에 recoil 폴더를 생성한다.

폴더 내에 state.js 파일을 생성한다.

// state.js
import { atom } from "recoil";

export const searchTextState = atom({
  key: "searchTextState",
  default: "",
});

이렇게 전역 상태 공유가 끝(?)났다.

이제 어떻게 이 상태를 업데이트하는지, 구독할 수 있는지가 중요하겠다.

hooks

• useRecoilState():
  useState와 유사하게 [state, setState] 구조분해할당으로 사용할 수 있다. 인자에 state.js에 정의한 atom/selector를 넣어준다.

  state와 setState로 전역 상태를 구독하고, 업데이트할 수 있다. (매우 간단. 미쳤다😳)

  const [searchText, setSearchText] = useRecoilState(searchTextState);
  

  그런데 전역 상태를 관리할 때에는 컴포넌트에서 state를 구독만 할 수도, 업데이트만 할 수도 있다.
  그럴 때 아래와 같은 hook을 사용하면 된다.

• useRecoilValue():
  useRecoilState에서 첫번째 인자만 사용하도록 하는 것. 즉, 구독만해서 전역 상태 값만 참조하겠다는 것이다.

• useSetRecoilState():
  useRecoilState에서 두번째 인자만 사용하도록 하는 것. 전역 상태를 업데이트만 하겠다는 것이다.

• useResetRecoilState():
  전역상태를 default(초기값)으로 Reset.

selector

get, set 함수를 사용할 수 있다.

selector를 이용하여 비동기 처리를 구현하게 된다.

selectorFamily

selectorFamily를 한 이유는 api 요청 시 params을 동적으로 받아올 것이기 때문에
매개변수가 필요한 경우 family를 사용해서 구현한다.

import { atom, selectorFamily } from "recoil";
import { API } from "../config/apiConfig";

export const searchTextState = atom({
  key: "searchTextState",
  default: "",
});

export const getMoviesSelector = selectorFamily({
  key: "movie/get",
  get: (word) => async () => {
    try {
      console.log(word);
      const { data } = await API.get("", {
        params: { s: word, page: 1 },
      });
      return data;
    } catch (err) {
      console.error(err);
    }
  },
});

suspense

React 18부터 정식으로 제공하는 기능이다.

declaratively “wait” for anything else, including data. 이라고 한다.
즉, 선언적으로 데이터 등과 같은 것의 로딩을 구현할 수 있도록 해준다.

컴포넌트의 데이터가 아직 resolve되지 않은 경우 받은 fallback element를 나타내준다.

function App() {
  return (
    <RecoilRoot>
      <Suspense fallback={<div>Loading...</div>}>
        <AppBox>
          <GlobalStyles />
          <AppRoutes />
        </AppBox>
      </Suspense>
    </RecoilRoot>
  );
}

[참고]
https://abangpa1ace.tistory.com/212
https://velog.io/@juno7803/Recoil-Recoil-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0

회고 (TIL)

2022.03.26 Daily 회고

✏오늘 한 일

• 과제 전형 시작
  • 프로젝트 세팅
  • recoil

⁉느낀 점

프로젝트 세팅은 역시 오래걸린다. 많이 해서 손에 익었으면 좋겠다.
그나저나 webpack babel은 언제한대..

recoil 처음 써봤는데, 확실히 간단하게 쓸 수 있다는 것이 매우 놀랍다.
캐싱까지 되고, suspense로 간단히 loader도 사용할 수 있다. 코드가 진짜 짧아지는 것 같다!! (내일 toolkit으로도 구현해서 비교해봐야지)
하지만 이걸 현업에서 잘 쓸지는 모르겠다. graphQL이 먼저인 것 같기도 하고.

🎃현재 나의 상태

놀고 왔더니 나사빠졌다!
그래서 내일은 더 몰두할 수 있도록 에너지 끌어올려야지

---