내일 배움 캠프 4기 TIL(23.01.19)

Check List

• Recoil 사용하기

Learn

• Recoil, react qeury 초기 세팅

import React from 'react';
import { RecoilRoot } from 'recoil';
import { QueryClientProvider,QueryClient } from 'react-query';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RecoilRoot>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </RecoilRoot>
);

reportWebVitals();

• 설치

  yarn add recoil

• atom

  import { atom } from "recoil";
  
  export interface ITodoTypes {
    id: number;
    contents: string;
    isCompleted: boolean;
  }
  export const inputState = atom<string>({
    key: "inputState",
    default: "",
  });
  
  export const todoState = atom<ITodoTypes[]>({
    key: "todos",
  
    default: [
      {
        id: 1,
        contents: "스트레칭 하기",
        isCompleted: false,
      },
    ],
  });

  atom 안에 고유의 key값은 중복이 되면 안된다. default 값이 전역 상태 관리하는 값이다
  
• useRecoilState

  const [todos, setTodos] = useRecoilState<ITodoTypes[]>(todoState);

  useState처럼 사용 ()안에 atom을 넣어줌 ⇒ 전역 사용 가능
  
• useRecoilValue 읽기 전용

  
  const todos = useRecoilValue<ITodoTypes[]>(todoState);

• useSetRecoilState 쓰기 전용 (set)

const setTodo = useSetRecoilState<ITodoTypes[]>(todoState);