1. Axios InstanceAxios Instance는 Axios를 설정하고, 재사용 가능한 설정을 가진 HTTP 클라이언트를 만드는 방식이다. 일반적으로 API 요청을 보낼 때 공통으로 필요한 설정(예: 기본 URL, 헤더, 인증 정보)을 매번 지정하지 않고 인스턴스에서 설정해두고 사용할 수 있다. 2. Axios instance 생성 방법import axios from 'axios';// Axios instance 생성const apiClient = axios.create({ baseURL: 'https://api.example.com', // 기본 URL 설정 timeout: 5000, // 요청 제한 시간 (ms) headers: { 'Content-Type': 'applicatio..

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

1. concatconcat은 두 개의 문자열을 하나의 문자열을 만들어주는 역할을 하는 함수이며, 입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어주는 역할도 하는 함수이다. 2. 합치기[문자열].concat([문자열])[배열명].concat([배열명]) 3. 예시 const arr1 = new Array ("배열 1", "배열 2"); const arr2 = new Array ("배열 3", "배열 4"); const arr = arr1.concat(arr2); // ['배열 1', '배열 2', '배열 3', '배열 4'] 4. React에서 사용이는 기존 배열을 수정하지 않고, 새로운 배열을 반환한다.이는 불변성을 유지한 상태에서 값을 수정할 수 있다. 즉 원본은..

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

1. 전역 상태 관리애플리케이션 전체에서 공유되는 상태를 중앙에서 관리하고, 이를 필요로 하는 컴포넌트들이 손쉽게 접근하거나 업데이트 할 수 있도록 하는 방식이다. 전역 상태는 로컬 상태(컴포넌트 내부에서만 사용하는 상태)와 달리, 여러 컴포넌트가 동시에 접근하고 사용할 수 있는 데이터를 의미한다. 1-1. 전역 상태 관리가 필요한 이유1. 상태 공유여러 컴포넌트에서 동일한 데이터를 사용해야 할 때, 개별적으로 상태를 관리하면 데이터 동기화가 어려워질수도 있다. 이를 방지하기 위해 전역 상태 관리가 필요하다. 2. 복잡한 상태 흐름 관리상태를 부모-자식 간에 계속 전달해야하는 Props Drilling 문제를 해결한다. 전역 상태 관리 도구를 사용하면 상태를 중앙에서 관리해 데이를 필요한 곳에서 바로 사..

1. React Context APIReact에서 컴포넌트 트리를 통해 데이터를 전역적으로 공유하기 위해 사용하는 기능이다. 이를 통해 부모, 자식 관계의 중간 컴포넌트들을 거치지 않고 데이터를 직접 전달할 수 있다. Props-Drilling을 피할 수 있다. Context API는 상태 관리가 필요한 경우 Redux와 같은 외부 라이브러리를 대체할 수 있는 간단한 방법으로 사용이 된다. 2. 주요 개념2-1. Context 생성(React.createContext)Context는 React.createContext 메서드를 호출하여 생성된다.생성된 Context에는 Provider와 Consumer라는 두 가지 중요 컴포넌트가 포함되어 있다.const MyContext = React.createCon..