리액트 React

draggable 사용 시 위치 초기화 방법

참고 자료https://ant.design/components/modalhttps://github.com/react-grid-layout/react-draggable/issues/214 개요position 을 state 로 관리함onDrag, onStop 시 position 을 update 해줌라이프사이클에 따라 position 을 {x: 0, y: 0} 으로 초기화해줌  코드import Draggable from 'react-draggable';const [position, setPosition] = useState({}); // 모달의 위치 const [bounds, setBounds] = useState({ // 모달을 움직일 수 있는 범위 left: 0, top: 0, bottom: 0, ..

[Firebase] Firestore 에서 데이터 다루기

Firestore 의 데이터는 Collection(컬렉션) 과 Document(문서) 로 되어있다. Collection > Document 로 되어있는데, 각 문서는 {key: value} 형식으로 들어가있으며 Collection 이 들어가도 된다. Document 불러오기 하나의 Document 불러오기 const docRef = doc(firestore, 'myCollection', 'doc1'); const docSnap = await getDoc(docRef); if (docSnap.exists()) { console.log('Document data:', docSnap.data()); } 모든 Document 불러오기 // 'myCollection' collection 의 모든 document ..

ReduxToolkit 을 사용할 때 적절한 파일 구조

추천하는 파일 구조 코드의 쉬운 관리를 위해, 기능 (feature, component) 과 redux code 를 한 파일에 같이 배치 적용했을 때 . ├── App.css ├── App.tsx ├── app │ └── store.ts ├── components ├── features │ └── todo │ ├── Todo.tsx │ └── todoSlice.ts ├── index.css ├── index.tsx └── react-app-env.d.ts 참고자료 https://www.reddit.com/r/reactjs/comments/tnna7t/recommended_folder_structure_for_reduxtoolkit/ https://redux.js.org/style-guide/#struct..

3. useInfiniteQuery

useInfiniteQuery useInfiniteQuery = 몇몇 인자들이 추가된 useQuery 파라미터 값만 변경하여 동일한 useQuery 를 여러번 호출할 때 사용 => Infinite Scroll, Pagination 에 사용 가능 useInfiniteQuery 의 인자들 (Request) useQuery 에서도 사용한 인자들 queryKey queryFn ({pageParam = initialUrl}) => fetchUrl(pageParam) pageParam 은 고정 pageParam 에, 다음에 요청할 정보를 넣어줌, url 이 될 수도 있고 page(숫자)가 될 수도 있음 API 에서 다음 요청 으로 주는 정보가 무엇이냐에 따름 (new) useInfiniteQuery 의 인자들 (옵..

2. React Query 설치 및 실행 / staleTime, cacheTime / 기본 코드

React Query 설치 및 실행 React Query 설치 npm install react-query React Query Devtools 설치 npm install @tanstack/react-query-devtools query client 생성 cache 와 interact 하는 것 queryProvider 적용 cache, client config 를 제공함 3 에서 만든 query client 가 필요함 모든 자식 컴포넌트들이 queryClient 를 사용할 수 있도록 함 useQuery 실행 서버에서 데이터 가져오기 위해 사용 hook 임 Stale, staleTime Stale 해진다는것은? 만료되었다는 의미 Data 는 stale 상태 에서만 데이터를 fetching 함 componen..

1. React Query 란

React Query 란 Powerful asynchronous state management maintains cache of server data on client 클라이언트에 캐싱 되어있는 서버의 데이터 를 (최신으로) 유지 하려 함 최신의 데이터를 유지하는 React Query 캐시는 데이터를 최신의 상태로 유지함 클라이언트는 데이터가 필요하면, 서버로 요청하는 것이 아니라 React Query 의 캐시로 요청함 (React Query 가 요청하고 refetch 하고 알아서 다 함) React Query 에서 State 관리에 도움을 주는 도구들 모든 쿼리에 대한 loading, error 처리 pagination, infinite scroll prefetch - 미리 fetch 해두어서, cl..

SSR, CSR 비교

렌더링 이란 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말함 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것 만약 www.naver.com 을 입력한다면, 네이버의 서버로 화면을 그릴 내용을 요청하고 받아서 화면에 그림 Client 에서 그린다면 CSR, Server 에서 그린다면 SSR 임 CSR CSR 이란? CSR = Client Side Rendering 사용자가 요청할 때 마다, 리소스를 서버에서 보내주면 클라이언트 (브라우저) 는 이를 해석 해서 화면에 그려줌 예시 body 안에는 id="root" 만 달랑 하나 들어있고, 어플리케이션에..

서버 상태관리 라이브러리 비교

대상 라이브러리 React Query (@tanstack/react-query, react-query) TanStack Query 와 같음, 과거에는 React Query 였으나 최근 TanStack Query 라는 이름 사용중 SWR Redux Toolkit (@reduxjs/toolkit) Apollo Client (@apollo/client) 비교 @apollo/client 는 React 외에도 다른 곳에서도 사용할 수 있음 Redux Toolkit 은 상태관리 용도로 다운받는 경우도 많음 ReactQuery 는 @tanstack/react-query + react-query 를 합쳐야 함 간단 비교 React Query SWR Redux Toolkit Query Apollo Client 러닝커브 ..