1. persist 미들웨어persist는 Zustand 상태를 지정된 스토리지에 저장하고, 페이지를 새로고침하거나 애플리케이션을 다시 열 때 해당 상태를 복원하는 역할을 한다. 1-2. 특징상태 저장 및 원본: 상태를 브라우저의 localStorage 또는 sessionStorage 같은 스토리지에 저장한다.기본 키 제공: 저장소에서 상태를 구분하기 위한 키를 설정할 수 있다.직렬화/역직렬화: 상태를 JSON형식으로 저장하고 복원한다.선택적 상태 저장: 필요한 특정 상태만 선택적으로 저장할 수 있다.import { create } from 'zustand';import { persist } from 'zustand/middleware';const useStore = create( persist( ..

1. Fetch-on-render1-1. 개념데이터를 컴포넌트가 렌더링된 이후에 가져온다.일반적으로 useEffect를 사용하여 데이터 fetching을 실행하고, 상태를 업데이트하여 화면에 데이터를 렌더링한다.1-2. 장점구현이 간단하고, React의 기존 생명 주기를 따른다.초기에 최소한의 코드로 시작하기에 적합하다.1-3. 단점컴포넌트가 ㅁ너저 렌더링되고 데이터를 가져오는 동안 빈 상태나 로딩 화면이 보인다.사용자 경험(UX)이 떨어질 수 있다. function Component() { const [data, setData] = React.useState(null); React.useEffect(() => { fetch('/api/data') .then((response) => r..

1. useMutationReact Query 라이브러리에서 제공하는 훅으로, 서버에 데이터를 생성, 수정, 삭제하는 비동기 작업을 간단하고 효과적으로 처리할 수 있도록 도와준다. 주로 POST, PUT, DELETE 요청과 같은 작업에 사용되며, React 상태 관리와 결합하여 데이터 갱신 및 UI 업데이트를 효율적으로 처리한다. 1-1. 주요 특징비동기 데이터 조작: 데이터를 서버에 전송하거나 수정하는 작업을 처리한다.상태 관리isLoading: 요청이 진행중인지 나타냄isError: 요청이 실패했는지 나타냄isSuccess: 요청이 성공했는지 나타냄옵션을 통한 제어성공 또는 실패 시 호출되는 콜백 함수를 설정할 수 있음(onSuccess, onError 등)자동 리패치데이터 변경 후 React Qu..

1. React useQueryReact Query에서 제공하는 훅으로, 서버에서 데이터를 가져오고 이를 관리하는 강력한 도구이다. 비동기 데이터 패칭, 캐싱, 업데이트, 에러 핸들링 등을 간편하게 처리할 수 있다. 1-1. 주요 특징비동기 데이터 패칭데이터를 서버에서 가져오기 위해 사용된다. 내부적으로 데이터를 자동으로 가져오고 캐싱한다.캐싱 및 데이터 일관성같은 키(queryKey)로 요청하면 이미 캐싱된 데이터를 사용하고, 필요 시 다시 패칭한다.자동 갱신 및 리패치데이터를 갱신하거나 특정 조건에서 자동으로 다시 요청한다.로딩 및 에러 상태 관리데이터 로드 상태, 에러 발생 여부를 간단하게 확인할 수 있다. 1-2. 기본 사용법import { useQuery } from '@tanstack/rea..

1. Tagged Template Literal 기본 구조tagFunction`문자열 ${expression} 문자열`; tagFunction : 템플릿 문자열을 처리하는 함수문자열 ${expression} : 템플릿 리터럴로 표현되는 문자열태그 함수는 템플릿 리터럴의 문자열과 삽입된 표현식을 분리하여 전달받아 가공한 결과를 반환한다. 2. 사용법const userName = '무지';const weather = '맑음';const str = `안녕하세요. ${userName}님, 오늘 날씨는 ${weather} 입니다.`;const result3 = sayHello(['안녕하세요. ', '님, 오늘 날씨는 ', ' 입니다.'], userName, weather); 원래 사용하고자 하면 위와 같이, 배열..

1. Jotai전역 상태 관리 라이브러리로, Jotai는 일본어로 원자(atom)를 의미하며, 이 이름처럼 Jotai는 상태를 원자 단위로 분리하여 관리 하는 방식으로 설계되었다. 2. Jotai 기본 사용법기본적으로 Jotai는 React 내의 State, useState와 유사한 모양이기 때문에, 쉽게 입문할 수 있다. 전역 관리 atom을 생성하고, 생성된 atom을 컴포넌트 내에 불러와 사용한다고 보면 된다. import { atom, useSetAtom } from "jotai";import { useCallback } from "react";import WritePrice from "./WritePrice";export const priceAtom = atom(10000);const App =..