TIL@220510

지원·2022년 5월 11일

목록 보기

4/6

Recoil

Asynchronous Data Queries

Recoil은 data-flow 그래프를 통해 state 및 derived state를 React 컴포넌트에 제공함(provide)
data-flow graph는 동기적/비동기적 기능을 제공, 필요에 따라 함께 사용할 수 있음
비동기 호출에서는 value 자체가 아닌 Promise 객체를 반환함
selector의 get을 비동기 함수로 구현하면, Recoil data-flow 그래프와 비동기 데이터를 결합할 수 있음

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

React의 렌더링은 동기적으로 작동하며, 비동기 호출에서의 프로미스가 resolve 되기 전에 render될 수 있음. 따라서 다음과 같이 Suspense를 통해 fallback UI를 구현

function MyApp() {
  return (
    <RecoilRoot>
      <React.Suspense fallback={<div>Loading...</div>}>
        <CurrentUserInfo />
      </React.Suspense>
    </RecoilRoot>
  );
}

공식 문서

Create-React-App + TypeScript + ESLint에서 Path Alias 설정하기

tsconfig.json에 경로 추가 (compilerOptions > path)
eslint-import-resolver-typescript 라이브러리 추가, .eslintrc.json에 다음과 같이 설정

"settings": {
  ...,
  "typescript": {
  	"alwaysTryTypes": true,
  	"project": "tsconfig.json"
  }
}

webpack 설정 overriding을 위해 craco 라이브러리 추가(npm eject할 수도 있지만, CRA의 장점이 사라지므로). 설정은craco.config.js에 작성하고 build에 react-scripts 대신 craco 사용하도록 script 설정

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@colors': path.resolve(__dirname, 'src/styles/constants/_colors.scss'),
      '@levels': path.resolve(__dirname, 'src/styles/constants/_levels.scss'),
    },
  },
};