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..

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

대상 라이브러리 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 러닝커브 ..

상태관리 라이브러리 비교 (Redux Toolkit, Zustand, Recoil)

대상 라이브러리 Redux Toolkit (@reduxjs/toolkit) Zustand Recoil 비교 NPM Trends 간단 비교 Redux Toolkit Zustand Recoil 러닝커브 Redux 를 알고 있으면 거의 없음 매우 낮음 낮음 (개인적으로는 안낮음 ^~^..) 디버깅 툴 Redux Devtools Redux Devtools 있으나 불안정함 제작자 Dan Abramov (Redux 개발자) 카토 다이시 (Jotai 개발자) Facebook 현재 버전 v1.9.2 v4.3.2 v0.7.6 출시 연도 2020 2019 2020 비고 Redux 에서 영감을 받아 만들었다고 함 아직 1.0 이 나오지 않았음 자잘한 버그가 종종 있다고 함 소개 및 사용 예제 Redux Toolkit RTK..

라이브러리와 프레임워크 (feat. 리액트는 라이브러리일까 프레임워크일까)

들어가며 김영한님의 스프링 강의를 듣던 중… 이런 내용이 나왔다. 프레임워크 vs 라이브러리 프레임워크가 내가 작성한 코드를 제어하고, 대신 실행하면 그것은 프레임워크가 맞다. (JUnit) 반면에 내가 작성한 코드가 직접 제어의 흐름을 담당한다면 그것은 프레임워크가 아니라 라이브러리다. 리액트를 프레임워크가 아닌 라이브러리라고 부르는 이유는 단지 상태관리 때문이라고만 알고 있는데… 제어의 흐름을 담당하지 않아서라고? life cycle 은 리액트가 실행시키는게 아니었나? 그럼 리액트는 왜 프레임워크가 아니라 라이브러리인거지? 그러고보니 함수형 컴포넌트를 사용할 경우에는 life cycle 을 따로 타지 않는데… 그러고보니 프레임워크와 라이브러리의 정확한 차이는 뭘까?? 😋 그렇게 시작되었습니다~ 가장 ..

Outlet 을 사용하여 Navigation 구현하기 (react-router-dom)

Outlet 이란 공식 문서에서 가져왔다. An should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route. // 부모 컴포넌트 const router = createBrowserRouter([ { path: "/", element: , errorElement: , children: [ { path: "contacts..