React - 마이페이지

기능

1. 비동기 사용(react-query)

• 수정 감지해서 실시간 데이터 업데이트

2. 비동기 랜더링시 로딩화면(Suspense)

• 비동기 화면에서 로딩중에 어떻게 보여줄지 만듬

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; //실시간 데이터인 react-query
import { Provider } from 'react-redux';   //Redux
import { PersistGate } from 'redux-persist/integration/react';  //Redux 영속성
import { BrowserRouter } from 'react-router-dom'; //라우터
import store, { persistor } from './store'; // store.js에서 persistor import
import App from './App';

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <QueryClientProvider client={queryClient}>    
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </PersistGate>
    </Provider>
  </QueryClientProvider>
);

QueryClientProvider 요론걸 쓰겠다고 메인에 설정 먼저 하기

// 서버데이터 - 유저
import api from "./axios_setting.js";
import { useQuery } from '@tanstack/react-query';

const getUser = async () => {
    try {
        const response = await api.get('/userdata.json');
        return response.data;
    } catch (error) {
        console.error("Error fetching user:", error);
        throw error;
    }
};

export const User = () => {
    return useQuery({
        queryKey: ["useData"],        // 쿼리에 고유한 키 설정
        queryFn: getUser,             // 데이터 가져올 함수
        refetchOnWindowFocus: true,   // 창 활성화시 데이터 새로고침
        staleTime: 10000,             // 10초 동안 데이터 유지
        retry: 2,                     // 실패시 최대 2번 시도
        cacheTime: 10000,             // 케시된 데이터 10초 유지
    });
};

useQuery를 이용해서 가져온 데이터를 어떻게 쏘아줄지 디테일한 설정 가능

import { Table } from 'react-bootstrap';
import { User } from "../services/axios_user";

function MyPage(){

    //서버에 User 정보 값
    const { data: user, isLoading, error } = User();  //data 값을 user 라는 이름으로 사용

    if (isLoading) return '로딩중..';
    if (error) return '에러발생..';

    return (
      <div>
        <Table>
          <thead>
            <tr>
                <th>사용자 이름</th>
                <th>사용자 이메일</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>{user.name}</td>
              <td>{user.email}</td>
            </tr>
          </tbody>

        </Table>

      </div>
    )
    
}    
export default MyPage;

const { data: user, isLoading, error } = User();
User 받아온 값인 data를 user라는 이름으로 사용할수도 있음

{/* MyPage 이동 */}
            <Route path="/myPage" element={ 
                // 비동기작업 로딩중 보여주는 Suspense
                <Suspense fallback ={<div>로딩중....</div>}>    
                    <MyPage/> 
                </Suspense>
            } />

서스펜스는 간단함

라우트가 있는곳에 어떻게 보여줄지 만들주면 끝 ~

사용기술

• react-query
• Suspense