반응형 개발이야기/React10 react-query로 SSR 구현하기(with Next.js) react-query는 React 애플리케이션에서 데이터를 가져오고 관리하기 위한 패키지이고 Next.js는 React 기반의 서버 사이드 렌더링 프레임워크로 클라이언트와 서버에서 모두 실행되는 React 애플리케이션을 구축하는데 사용된다 React Query와 Next.js를 같이 사용하면 서버 사이드에서 데이터를 가져와 초기 렌더링 시점에 미리 데이터를 로드하여 초기 로딩 속도를 향상시킬 수 있다 react-query와 Next.js를 같이 사용하는 방법 1. react-query 패키지 설치 npm install react-query 2. Next.js 프로젝트 설정 Next.js 프로젝트의 \_app.js 파일을 열고 QueryClientProvider를 impor한다 QueryClientProv.. 2023. 5. 18. [React] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. \*.tsx 파일은 \*.ts 로 변경하면서 생긴 에러... 또는 import 할 때 { \*\*\* } 때문일 수도 있으니 import 할 때도 주의깊게 확인할 것! [정리] 해당 에러는 componen.. 2022. 9. 30. react-admin error: Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input eleme.. Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. Select의 value에 undefined가 들어가서 처리할 수 없다는 에러가 떴다 왜 이런 에러가 떴나 하고 보니.. Select에 value를 지정해주지 않았음... ... Select에 value를 넣어주고 useSta.. 2022. 5. 6. react-admin error: React does not recognize the 'basePath' prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase 'basepath' instead. If you accidentally passed it from a parent component, r.. Warning: React does not recognize the 'basePath' prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase 'basepath' instead. If you accidentally passed it from a parent component, remove it from the DOM element. 위와 같은 에러가 났다... 왜 이런 에러가 났는가 상황을 본다면 Table을 만들고 나서 에러가 생김 제목 내용 밤편지 이 밤 그날의 반딧불을 당신의 창 가까이 보낼게요 사랑한다는 말이에요 저 에러가 무슨 에러인지 찾아보.. 2022. 4. 28. [React] TypeScript - type과 interface TypeScript에서는 props 타입을 선언할 때 type과 interface를 사용한다 둘 다 타입을 선언한다는 공통점이 있지만 이 둘은 다르다 type 객체 타입 뿐 아니라 모든 타입에 대해 새로운 이름을 붙일 수 있다 // 예문 type TUser = { id: number; name: string; }; const typeUser: TUser = { id: 0, name: '김하나', }; interface 객체 타입을 만드는 또 다른 방법이다 // 예문 interface IUser = { id: number; name: string; }; const interfaceUser: IUser = { id: 0, name: '김하나', }; 확장하기 // interface 확장하기 interface.. 2022. 4. 6. React-query 시작하기 새 프로젝트에 React에서 비동기 로직을 쉽게 다루게 해주는 라이브러리 React-query를 사용하기로 결정이 났다 그래서 React-query를 공부하면서 블로그에 끄적여본다 개요 React Query는 종종 누락된 데이터 가져오는 라이브러리로 설명되지만, 보다 기술적인 용어로 말하면 React 애플리케이션에서 fetching(가져오기), caching(캐싱), synchronizing and updating server state(동기화 및 서버상태 업데이트)를 수행한다 기본 코드 import { QueryClient, QueryClientProvider, useQuery } from 'react-query' const queryClient = new QueryClient() export defa.. 2022. 3. 16. 이전 1 2 다음 반응형
