tanstack-react-query (useQuery, useMutation.mutate)
tanstack-react-query 의 useQuery, useMutation 사용하기 (기본) 아래의 API 들을 반환하는 비동기 함수들을 각각 useQuery, useMutation으로 불러와서 사용해 보자 // promise-then const fetchGetTodos = async (userId = 1) => { return fetch(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`) .then((response) => response.json()) .then((json) => json); }; // async-await const fetchPostTodos = async ( posts: any = { title: "foo", bod..
ReatToolkit and Thunk (with TS)
복습겸 기본적인 전역 상태 관리를 위해서 리덕스툴킷 간단하게 축소하여 구현하였다. RTK를 설치하고 configureStore에 combineReducers를 연결하고 그 안에는 createSlice된 액션 reducer들이 있다. 또한 비동기 함수 디스패치를 위해서 createAsyncThunk 함수를 생성한뒤, extraReducers에 할당 해 주었다. 이로써, 리덕스 툴킷에 대한 설치와 사용 + Thunk까지 실제 API를 사용하여 연결하였다. 전체 구조는 다음과 같다 실제 구현 예제)
CRA / yarn berry, typescript
yarn berry의 PnP기능을 사용하기 위한 Create React App 설치와 Typescript 설정 내용 작성은 2022.11.11 을 기준으로 합니다. (node 16.15.0) 연속해서 설치와 구성이 실패하는 경우 검색을 통해 가장 최근의 설치 튜토리얼을 참조해 주세요. 목차 yarn 설치 프로젝트 생성 node_module과 package.lock.json 제거 yarn berry 버전 적용 vscoe를 사용하는 경우 typescript 설정을 위한 editor SDK 설치와 ZipFS 확장팩 설치 plugin-typescript 설치 .gitignore 설정 react 실행 Property 'toBeInTheDocument' does not exist on type 'JestMatche..
Reack Hook useState 함수 컴포넌트가 렌더링 될 때 const 가 재할당되는것 처럼 보이지만 실제로는 useState 함수에서 초기 여부를 검사하여 전역적으로 setter에 값을 유지한다 아주 간단한 예제인 카운터를 들어보면 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return ( {number} +1 ..