전체 글
-
DevtoolsIT/Tanstack Query V5 2023. 12. 24. 01:41
설치 및 가져오기 npm i @tanstack/react-query-devtools import { ReactQueryDevtools } from '@tanstack/react-query-devtools' 기본적으로 개발환경의 번들에만 포함되기 때문에 production 빌드 중에 제외하는 것에 대한 걱정할 필요 X Floating Mode 앱에 고정된 플로팅 요소로 마운트하고 화면 모서리에 개발자 도구 표시하고 제거할 수 있는 토글 제공 토글 상태는 다시 로드할 때마다 localStorage에 저장됨 import { ReactQueryDevtools } from '@tanstack/react-query-devtools' function App() { return ( {/* The rest of your..
-
시작하기IT/Tanstack Query V5 2023. 12. 24. 00:57
Tanstack Query란? 웹 응용 프로그램의 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 할 수 있도록 도와주는 라이브러리 대부분의 기존 상태 관리 라이브러리는 클라이언트 상태를 사용하는 데 유용하지만 서버 상태가 완전히 다르기 때문에 비동기 또는 서버 상태를 사용하는 데는 그다지 적합하지 않음 기능 캐싱 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거 백그라운드에서 "오래된" 데이터 업데이트 데이터가 "오래된" 경우 파악 데이터 업데이트를 최대한 신속하게 반영 페이징 및 레이지 로드 데이터와 같은 성능 최적화 서버 상태의 메모리 및 가비지 수집 관리 구조 공유를 사용하여 쿼리 결과 메모 장점 응용프로그램에서 복잡하고 잘못 이해된 코드의 많은 줄을 제거, React Query ..
-
리덕스 용어와 개념IT/리액트 2022. 8. 16. 17:32
상태 관리 아래는 간단한 카운터 컴포넌트이다. function Counter() { // State: a counter value const [counter, setCounter] = useState(0) // Action: code that causes an update to the state when something happens const increment = () => { setCounter(prevCounter => prevCounter + 1) } // View: the UI definition return ( Value: {counter} Increment ) } - State: 앱을 구동하는 근원 - View: 현재 상태를 기반으로 하는 UI의 선언적 설명 - Actions: 사용자의 입..
-
리덕스 시작하기IT/리액트 2022. 8. 16. 00:50
앱 자동생성 npm install @reduxjs/toolkit npx create-react-app my-app --template redux npm install redux 리액트 앱 생성 후 리덕스 적용 npm install @reduxjs/toolkit react-redux Redux Store 생성 리덕스 툴킷에서 configureStore API를 import 빈 리덕스 스토어를 생성하고 export 리덕스 스토어가 생성되고 개발하는 동안 스토어를 검사할 수 있도록 리덕스 devtools 확장도 자동으로 구성됨 import { configureStore } from '@reduxjs/toolkit'; export const store = configureStore({ reducer: { }, ..
-
리덕스란?IT/리액트 2022. 8. 16. 00:42
리덕스의 역할 리덕스는 상태를 관리, 갱신 하고 액션이라 불리는 이벤트를 사용하기 위한 패턴이자 라이브러리이다. 리덕스를 써야하는 이유 - 리덕스는 전역 상태를 관리할 수 있게 도와줌 - 리덕스에서 제공하는 패턴과 도구를 이용해 상태가 언제, 어디서, 왜, 어떻게 변하됐는지 쉽게 이해할 수 있음 - 예측 가능하고 테스트 가능한 코드를 작성할 수 있도록 안내하고, 예상대로 작동할 것이라는 확신을 줌 언제 써야하는가? - 장점: 공유 상태 관리를 처리하는데 도움이 됨 - 단점: 배워야할 개념과 작성해야할 코드가 더 많음. 코드에 간접 참조를 추가하고 특정 제한 사항을 따르도록 요청함. - 그럼 언제 사용해야함? 많은 곳에서 많은 양의 상태가 필요할 때 상태가 자주 갱신될 때 상태를 업데이트하는 로직이 복잡할..
-
[VSCODE] react native, node.js 실행 / 실행 오류 해결개발 프로젝트: 핀더펜 2022. 2. 10. 01:30
지난 포스팅에서 clone한 프로젝트를 실행해보겠습니다. react native 실행 터미널 창을 열고 client 폴더에 접근해서 npm start로 react native를 실행합니다. 그런데.... 위와 같은 오류가 생겼습니다...ㅜ 그래서 구글에 찾아보니 npm 폴더의 위치를 찾아서 환경변수에 등록하라고 해서 그대로 해봤습니다. cmd에서 npm -g root 로 npm 폴더의 위치를 찾습니다. 그리고 환경변수 설정에서 path에 C:\Users\[사용자명]\AppData\npm을 추가해줍니다. 그런데도 동일한 오류가 발생했습니다.... 그래서 프로젝트 폴더를 확인해봤더니 expo-shared는 있는데 expo는 없더라구요... 그래서 expo를 추가해줬습니다. 그런데도 다음과 같은 오류 발생....
-
리액트 주요개념 - React로 사고하기IT/리액트 2022. 1. 16. 23:54
React는 JavaScript로 규모가 크로 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. 이번 글에서는 React로 상품을 검색할 수 있는 데이터 테이블을 만드는 과정을 살펴볼 것입니다. 목업으로 시작하기 애플리케이션을 설계하기 전 디자이너로부터 JSON API와 목업을 받습니다. // JSON API [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false,..