미해결
[리뉴얼] React로 NodeBird SNS 만들기
다른 질문 들도 보다가 궁금한 점이 생겨 여쭤봅니다. 프로젝트에서 내에서 상태관리를 redux로 하고 server에서 데이터 패칭하는 부분을 (공부해 보니 server state라고 부르더군요) react-query(또는 swr)로 사용하려는 경우 설정을 어떻게 해야하나 궁금해서 검색해봤는데 마땅한 자료가 없어서 질문드려요 CRA기준으로 index.js에 import React from " react "; import ReactDOM from " react-dom "; import App from " ./App "; import reducer from " ./reducer "; import { Provider } from " react-redux "; import { configureStore } from " @reduxjs/toolkit "; import { Global } from " @emotion/react "; import { GlobalStyle } from " ./index.style "; import { QueryClientProvider , QueryClient } from " react-query "; const store = configureStore ( { reducer } ) ; const queryClient = new QueryClient () ; ReactDOM . render ( < Provider store = { store } > < QueryClientProvider client = { queryClient } > < App /> < Global styles = { GlobalStyle } /> </ QueryClientProvider > </ Provider > , document . getElementById ( " root " ) ) ; 이런식으로 사용해서 reducer 함수 정의하고 각 컴포넌트에서 queryClient를 import해서 사용하는 건가요? 제로초님 강의 들으면서 react-query를 이제 막 공부하고 있는데 react-query가 내부적으로 contextAPI 사용한다고 알고있는데 redux랑 contextAPI를 같이 쓴다는게 정확히 감이 안잡히네요 제가 잘못알고 있는 부분이나 공부해야할 키워드를 알려주시면 감사하겠습니다.
- redux
- swr
- nodejs
- redux
- react-query
- express
- react
- Next.js
homie
댓글 2
좋아요 0
조회수 1094
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 매번 제로초님의 강의로 많은 도움과 영감을 얻어 사내에서 사용하는 시스템을 적용중에 있습니다. 감사드립니다. 다름이 아니라 타입스크립트 버전인 리액트쿼리를 깃허브에 올려주셔서 적용해봤는데요 새로고침 시 기존에는 깜박임 없이 바로 로그인 이후 페이지로 연결되었던게 지금은 일시적으로 로그인 페이지에 접근했다가 메인페이지로 가더라구요 그래서 임시로 Loading아이콘을 보여주는 식으로 했는데 제가 잘못사용해서 그런건가요? 소스코드 첨부합니다.ㅜㅜ import React , { useEffect , useState } from 'react' ; import { dehydrate , QueryClient , useQuery } from 'react-query' ; import User from '../interfaces/user' ; import AppLayout from '../components/AppLayout' ; import { loadMyInfoAPI } from '../apis/login' ; import LoginLayout from '../components/login' ; import { GetServerSidePropsContext } from 'next' ; import axios , { AxiosError } from 'axios' ; import Router from 'next/router' ; import { Spin } from 'antd' ; const Home = () => { //const [ref, inView] = useInView(); const [ loading , setLoading ] = useState ( true ); const { data : me } = useQuery < User >( 'user' , loadMyInfoAPI ); useEffect (() => { console . log ( '1111' ); if ( me ) { setLoading ( false ); } }, [ me ]); return ( < div > { loading == true ? ( < div className = "loadingBar" > < Spin /> </ div > ) : me ? ( < AppLayout /> ) : ( < LoginLayout /> ) } </ div > ); }; export const getStaticProps = async () => { const queryClient = new QueryClient (); await queryClient . prefetchInfiniteQuery ( 'user' , () => loadMyInfoAPI ()); return { props : { dehydratedState : JSON . parse ( JSON . stringify ( dehydrate ( queryClient ))), }, }; };
- react-query
- nodejs
- react
- redux
- express
- Next.js
하늘의개혁
댓글 1
좋아요 0
조회수 378
