[본 캠프 39일차] React 심화 강의(axios, tanstack query, zustand, ...)

동기와 비동기의 개념 

동기 : 요청과 그에 따른 응답이 순차적으로 일어나는 방식 (순서대로 하나씩 일을 처리하는 것)

  - for문은 동기적으로 동작한다

 

비동기 : 여러개를 한번에 일을 처리하는 것

  - setTimeOut ~~ 1000) 1초뒤에 실행되니 그 다음 코드를 비동기적으로 실행한다. 

  - fetch 로 외부데이터를 가져오면 비동기적으로 처리한다.

 

동기 비동기 완벽히 이해하기 위해선 Promise 객체를 잘 이해해야만 한다.

 

Promise : 자바스크립트에서 비동기 작업의 완료(Fulfilled) 또는 실패(Rejected)를 처리하기 위해 사용

• 대기(Pending) : 초기 상태. 즉, 이행되거나 거부되지 않은 상태이다. 
• 이행(Fulfilled) : 비동기 작업의 성공적으로 완료된 상태 
• 거부(Rejected) : 비동기 작업이 실패한 상태. 
  
  Promise 객체는 then, catch, finally 메서드를 통해 이행되거나 거부된 이후의 동작을 정의할 수 있다.

생성방법

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행합니다.
  if (/* 작업이 성공적으로 완료되면 */) {
    resolve("성공 메시지");
  } else {
    reject("실패 메시지");
  }
});

 

예시코드

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 작업의 성공 여부를 나타내는 변수
    const success = true;

    if (success) {
      resolve("작업이 성공적으로 완료되었습니다!");
    } else {
      reject("작업이 실패했습니다.");
    }
  }, 2000);
});

myPromise
  .then((result) => {
    console.log(result); // "작업이 성공적으로 완료되었습니다!" 출력
  })
  .catch((error) => {
    console.log(error); // "작업이 실패했습니다." 출력
  });

 

promise all 로 병렬 처리 가능

async 는 promise 항상 반환한다.

await 는 promise 를 반환하는 값 앞에 사용한다. fetch, json

 

json-server

supabase, firebase 를 사용하지 않아도 프론트엔드의 로직과 화면을 구현 할 수 있어 효율적으로 협업가능 실무에서 사용

 

설치 yarn add json-server

db.json 파일을 만들어주기 [ { id: , title, content, } ]

실행은 yarn json-server db.json --port 4000

 

Axios

node.js와 브라우저를 위한 promise 기반 http 클라이언트

fetch 와 기능이 유사하다 (외부 http 통신으로 데이터를 가지고 옴)

 

axios  기본설정, 인터셉터

fetch 에러 핸들링(then, catch)

 

설치 yarn add axios

 

await fetch 가 아니라 await axios.get("http://localhost:4000/todos") 이런식으로 한다. axios 는 json 을 사용하지 않는다.

axios.get("http:/~~") 데이터 가져오기

axios.post("http://~~")  데이터 추가 map

axios.delete("http://~~" + 인자) 데이터 삭제 filter

axios.patch ("http://~~" + 인자2개) 데이터 수정 map, if 

 

axios custom instance 만들기

src > axios > api.js

 

const api = axios create({  // interceptors 만들기

 baseURL: "http:// ~~ "

})

api.interceptors.request.use() // 요청

api.interceptors.response.use() // 응답

 

 

TanStack Query  : 서버상태
useQuery 외부에서 데이터를 가지고 오는 것

useMutation 클릭을 했을 때 데이터를 업데이트 할때 (게시물 등록 눌렀을 때 기존 데이터 업데이트)

invalidateQuries 무효화한다 ( useQuery 에서 가져온 데이터를 무효화 하고 useMutation 으로 업데이트 할때)

 

기본 사용법

get > useQuery
modify > useMutation
refresh > invalidate Query

yarn add @tanstack/react-query

Provider 처럼 안을 전역 상태로 만들어준다

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
     <App />
</QueryClientProvider>

 

useQuery 사용방법 
yarn add json-server
yarn add axios

const fetchTodos = async () => {
   const response = await axios.get("http://~~");
   return response.data;
};

// 이쪽에 isPending, isError 처리

const {data, isPending, isERrror } = useQuery( {
   queryKey: ["todos"],
   queryFn: fetchTodos, 
} );


if (isPending) {
  return <div>로딩중입니다</div>;
}

if (isError) {
   return <div>오류가 발생했습니다</div>
}

 

useMutation 사용방법

axios.post

 

const mutation = useMutation({

  mutationFn: addTodo,

});

 

mutation.mutate(newTodo)

 

 

 

고급 cancellation, optimistic update, prefetching, lagged queries , infinite query

 

1. Cancellation (취소 기능)

• 설명: 서버로부터 데이터를 가져오는 중에 해당 요청을 취소할 수 있는 기능입니다.
• 사용법: 예를 들어, 사용자가 검색어를 입력할 때, 입력이 완료되지 않은 상태에서 서버로 데이터를 계속 요청하는 것은 불필요한 리소스 사용입니다. 이때, 이전 요청을 취소하고 새로 요청할 수 있는 기능을 사용해 불필요한 서버 요청을 막을 수 있습니다.

2. Optimistic Update (낙관적 업데이트)

• 설명: 서버 응답을 기다리지 않고, 예상 결과를 미리 UI에 반영하는 기능입니다. 서버 요청이 성공할 것이라고 '낙관적으로' 가정하고, 그 결과를 즉시 화면에 반영하는 방식입니다. 예를 들어, 댓글을 작성하면 서버가 응답하기 전에도 사용자가 방금 입력한 댓글이 화면에 표시되는 경우입니다.

3. Prefetching (사전 로딩)

설명: 사용자가 아직 요청하지 않은 데이터를 미리 가져오는 기능입니다. 예를 들어, 사용자가 특정 페이지에 도달하기 전에 필요한 데이터를 미리 가져와, 페이지를 방문할 때 바로 데이터를 표시할 수 있도록 준비하는 방식입니다.
- 팀 프로젝트에서 더 많은 카드를 불러올 때 '더보기'를 눌러서 가져왔는데 Prefetching 으로 더보기에 마우스오버만 해도 미리 데이터를 캐시에 저장해서 매우 빠르게 다음 카드를 불러올 수 있다.

4. Lagged Queries (지연된 쿼리)

• 설명: 데이터가 업데이트되거나 다시 가져오는 중일 때, 로딩 상태를 덜 드러내도록 지연시키는 방법입니다. 사용자가 불필요한 로딩 애니메이션을 너무 자주 보지 않도록 데이터가 빠르게 가져올 수 있으면 그 사이에 로딩을 숨기는 방식입니다.4. Lagged Queries (지연된 쿼리)
  • 설명: 데이터가 업데이트되거나 다시 가져오는 중일 때, 로딩 상태를 덜 드러내도록 지연시키는 방법입니다. 사용자가 불필요한 로딩 애니메이션을 너무 자주 보지 않도록 데이터가 빠르게 가져올 수 있으면 그 사이에 로딩을 숨기는 방식입니다.

1. 이커머스 플랫폼 (예: Amazon, eBay)

2. 소셜 네트워크 서비스 (SNS) (예: Facebook, Twitter)

3. 프로젝트 관리도구 (예: Trello, Jira)

4. 금융 서비스 애플리케이션 (예: PayPal)

5. 채팅 애플리케이션 (예: Slack, Discord)

당근마켓이나 토스같은 곳들도 다 사용하기 때문에 배우는 게 좋다.

 

infinite query 무한스크롤