Portfolio

리코일 레퍼런스 리덕스와 다른 점 주요 컨셉 사용법 리액트 쿼리 레퍼런스 결론 해결하고 싶은 문제 리액트 쿼리가 해주는 것 디테일 useQuery hook useMutation

리코일

상태 관리 라이브러리이다

레퍼런스

openreplay - using recoil instead of redux ...

리덕스와 다른 점

it is minimal compared to Redux with no boilerplate code setup needed

컴포넌트 내 데이터 흐름을 알 수 있는 데이터 그래프를 제공한다

주요 컨셉

아톰: (컴포넌트가 접근하고 변화를 구독할 수 있는) 글로벌 상태 단위

셀렉터: (컴포넌트가 접근하고 변화를 구독할 수 있는) 상태를 (동기적으로 또는 비동기적으로) 바꾸는 것

사용법

개요:


세팅
RecoilRoot(App())

아톰 만들기
atom({ 
  key: "animeTitleList", 
  default: [] 
})

셀렉터 만들기
selector({ 
  key: "slicedAnimeTitles",
  get: ({ get }) => {
    const animes = get(animeTitles)
		// ...

		return /* ... */
  }
})

RecoilRoot로 App을 감싸준다:


import React from "react";
import ReactDOM from "react-dom";
import { RecoilRoot } from "recoil";
import "./index.css";
import App from "./App";
ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById("root")
);

아톰 만들기:

with the key prop, Recoil knows the part of the global state to update so when we pass data to update the state it does it correctly and we won’t need to compare action types as we would do in Redux.

셀렉터 만들기:

리액트 쿼리

레퍼런스

medium - how to start using react query

결론

React Query is a great hook library for managing data requests that completely removes the need to put your remote data inside the global state. You just need to tell the library where you need to fetch your data, and it will handle caching, background updates, and stale data without any extra code or configuration.

React Query also removes the need for useState and useEffect hooks and replace them with a few lines of React Query logic. In the long run, it will definitely help you keep your application maintainable, responsive, and fast.

리액트 쿼리는 데이터 요청을 관리해주는 훅 라이브러리이며 원격 데이터를 글로벌 상태로 집어 넣어야 하는 불편함을 해소해준다.

해결하고 싶은 문제

Wouldn’t it be nice if you could separate the local state from the remote state? And what if you can reduce the amount of boilerplate code you need to write for data fetching?

리액트 쿼리가 해주는 것

React Query. This library will help you to fetch, synchronize, update, and cache your remote data while also reducing the amount of code you need to write by providing you two simple hooks and one utility function.

디테일

useQuery hook

데이터 페칭 코드를 리액트 쿼리 라이브러리에 등록해준다

before:


import React, {useState, useEffect} from 'react';
import axios from 'axios';
// regular fetch with axios
function App() {
  const [isLoading, setLoading] = useState(false)
  const [isError, setError] = useState(false)
  const [data, setData] = useState({});
 
  useEffect(() => {
    const fetchData = async () => {
      setError(false);
      setLoading(true);
  
      try {
        const response = await axios('http://swapi.dev/api/people/1/');
  
        setData(response.data);
      } catch (error) {
        setError(true);
      }
      setLoading(false);
    };
    fetchData()
  }, []);

  return (/* ... */)
}

export default App;

after


import React from 'react';
import axios from 'axios';
import {useQuery} from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('fetchLuke', () =>
  axios('http://swapi.dev/api/people/1/'))

  return (/* ... */)
}

export default App;

api 명세:


useQuery(queryKey, queryFn, { options })

useMutation

The useMutation hook is commonly used to create/update/delete remote data. This function takes an asynchronous function to update your data (commonly between POST, PUT OR DELETE request) and returns a mutate function that you can call to trigger the mutation.

어떤 데이터를 업데이트(mutate)하는 함수를 리턴한다


const [mutatePostTodo] = useMutation(
  text => axios.post('/api/data', { text }),
  {
    onSuccess: () => {
      // Query Invalidations
      // queryCache.invalidateQueries('todos')
      setText('')
    },
  }
)

cheo

리코일

레퍼런스

리덕스와 다른 점

주요 컨셉

사용법

리액트 쿼리

레퍼런스

결론

해결하고 싶은 문제

리액트 쿼리가 해주는 것

디테일

useQuery hook

useMutation