React Practice | Recoil을 이용한 To-do 리스트

적용한 기술
React
TypeScript, Recoil, Axios

프로젝트 생성

yarn create react-app ./폴더_경로 --template typescript

yarn add recoil axios

보일러 플레이트 세팅

Recoil

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import LoadingComponent from "./components/LoadingComponent";

ReactDOM.render(
  <React.Suspense fallback={() => <LoadingComponent />}>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  <React.Suspense>,
  document.getElementById('root')
);

RecoilRoot?

Recoil의 상태 관리 기능을 이용하려면 부모 트리에 <RecoilRoot> 컴포넌트가 들어가야합니다.

React의 최상단 모듈 (EntryPoint 웹팩 참조) 인 index.js에 위치시키는 게 가장 적절합니다.

React.Suspense?

Recoil은
아직 로딩되지 않은 컴포넌트를 보여줄 때 React.Suspense를 이용합니다.

fallback prop으로 로딩 중 보여줄 컴포넌트를 넘겨주세요! (슬롯 형태)

라이브러리 사용법

비즈니스 로직