SWR 데이터를 가져오기 위한 React Hooks 요청을 하는 동안 캐시되어 있는 데이터를 먼저 보여줌 import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return failed to load if (isLoading) return loading... return hello {data.name}! } useSWR hook 은 key, fetcher 함수, options 를 전달받고 data, error 를 반환함 key: 데이터의 고유한 식별자 (일반적으로 API URL) fetcher: 데이터를 반환하는 비동기 함수 options: S..

react-query / devtools 설치 npm install @tanstack/react-query @tanstack/react-query-devtools QueryClientProvier / devtools 추가 import { QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // client 생성 const queryClient = new QueryClient(); export default function App() { return ( // 앱에 client 제공 // devtools ) } useQuery import ..

Automatic batching 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어서 한 번의 리렌더링에 업데이트가 모두 진행될 수 있게 해주는 것 한 함수 안에서 setState를 여러 번 호출시켜도 리렌더링은 단 한번만 발생함 함수의 끝에서 업데이트가 되며 여러 번 리렌더링 하는 것을 막기 때문에 성능에 좋은 영향을 줌 function handleClick() { setCount(c => c + 1); // 리렌더링 X setFlag(f => !f); // 리렌더링 X // 마지막에 한 번만 리렌더링함 } batch 처리 해제 import { flushSync } from "react-dom"; function handleClick() { flushSync(() => { setCount(count..

Recoil React 애플리케이션을 위한 상태 관리 라이브러리 Redux 보다 초기 설정 코드 작성 부분이 최소화 됨 페이스북에서 만들어졌기 때문에 리액트와 호환성이 좋음 recoil 설치 npm install recoil --save RecoilRoot 루트 컴포넌트를 RecoilRoot 로 감싸주면 하위 컴포넌트에서 recoil 상태 사용 가능 import { RecoilRoot } from 'recoil'; ... const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Atom 상태의 일부를 나타냄 모든 컴포넌트에서 읽고 쓸 수 있음 atom 의 값을 읽는 컴포넌트들은 암묵적으로 atom 을 구독함 때문에..

Mobx react 상태 관리 라이브러리 redux 다음으로 가장 많이 사용되고 있음 mobx 6 버전 이전에는 @데코레이터를 사용했지만 mobx 6 버전 부터는 데코레이터 사용을 지양하고 있음 Mobx 설치 npm install mobx 애플리케이션 상태 모델링 import { action, computed, makeObservable, observable } from 'mobx'; export default class CounterStore { count = 0; constructor() { makeObservable(this, { count: observable, isNegative: computed, increase: action, decrease: action, }); } get isNegati..

Redux Toolkit Redux 로직을 작성하기 위한 공식 권장 접근 방식 Redux 코어를 둘러싸고 있음 Redux 앱을 빌드하는 데 필수적인 패키지/기능이 포함되어 있음 Redux 작업을 단순화하고 실수를 방지할 수 있음 Redux Toolkit + 리액트 + 타입스크립트 프로젝트 생성 npx create-react-app [프로젝트 이름] --template redux-typescript 기본으로 카운터 애플리케이션이 생성됨 Redux Toolkit 설치 (기존 프로젝트에 설치) npm install @reduxjs/toolkit react-redux Store 생성 configureStore 를 사용하여 Redux Store 생성 reducer 함수를 인수로 전달받음 import { confi..