❓ 정의- Fragment는 React에서 여러 JSX 요소를 하나의 부모 요소로 감싸야 할 때, 추가적인 DOM 노드를 생성하지 않고 그룹화할 수 있도록 도와주는 컴포넌트다.- 일반적으로 JSX 문법에서는 하나의 부모 요소만 반환해야 하는 제약이 있는데, Fragment는 이러한 제약을 해결하면서도 DOM 구조를 간결하게 유지하고 성능을 최적화하는 데 도움을 준다. - React 개발자들이 컴포넌트를 설계할 때 불필요한 태그를 제거하고, 가독성과 유지보수성을 높이는 데 유용하다.▶ 기본 사용 예시import React from "react";function App() { return ( Title Description );}단축 문법( )을 사용하면 더 간결하게 작..

여태 진행했던 프로젝트들에선 zustand로만 전역 상태 관리를 했었다.const { setSelectedTheme, selectedThemeType } = useIngameThemeStore()그리고 이런 식으로 아주 간단하게 사용하고 있었으나... 최적화를 할 수 있는 방법을 우연찮게 알아냈다. 이걸왜이제서야바로 Selector와 shallow의 조합이다.import { shallow } from "zustand/shallow";const { setSelectedTheme, selectedThemeType } = useIngameThemeStore( (state) => ({ setSelectedTheme: state.setSelectedTheme, selectedThemeType: sta..

❓ useMemo- 계산 비용이 높은 작업의 결과를 메모이제이션하여 동일한 입력값에 대해 반복적으로 계산하지 않도록 한다. ▶ 기본 사용 예시import React, { useMemo } from 'react';function ExpensiveCalculationComponent({ num }) { const result = useMemo(() => { console.log('Expensive calculation...'); return num * 2; }, [num]); return Result: {result};}❓ useCallback- 함수 자체를 메모이제이션하여 렌더링 시 불필요하게 함수가 재생성되지 않도록 한다. 주로 자식 컴포넌트에 콜백을 전달할 때 사용된다.▶ 기본 사용 예..

❓ 정의- 함수를 메모이제이션하는 훅으로, 동일한 의존성 배열을 가지는 한 매번 새로운 함수가 생성되는 것을 방지하는 역할을 한다.▶ 기본 사용 예시const memoizedCallback = useCallback(callbackFunction, [dependencies]);첫 번째 인자로 메모이제이션할 함수를 받고, 두 번째 인자로 의존성 배열을 받는다.❗ 사용이유✅ 불필요한 렌더링 방지 -> 성능 최적화- React에서 함수는 컴포넌트가 리렌더링될 때마다 새로 생성되는데, useCallback을 사용하면 의존성이 변경되지 않는 한 동일한 함수 객체를 재사용할 수 있다!💥 주의1️⃣ 모든 함수에 useCallback을 적용할 필요는 없음! - 불필요하게 사용하면 오히려 성능이 저하될 수 있다.2️⃣ ..

❓ prefetchQuery란?- React Query에서 제공하는 데이터 프리페칭 메커니즘으로,  사용자의 실제 데이터 요청 전에 미리 데이터를 가져와 캐시에 저장하는 기능     -> 사용자가 해당 데이터를 필요로 할 때 즉시 보여줄 수 있음!▶ 기본 사용 예시import { QueryClient } from '@tanstack/react-query'import { fetchUserData } from './api'const queryClient = new QueryClient()queryClient.prefetchQuery({ queryKey: ['user', 1], queryFn: () => fetchUserData(1),})❗ prefetchQuery가 필요한 이유✅ UX 개선 - 페이지 전..

의존성 배열 없이 useEffect 사용 -> useEffect 내부의 콜백 함수는 컴포넌트가 렌더링될 때마다 실행됨! = 컴포넌트가 처음 마운트 될 때뿐만 아니라, 컴포넌트가 업데이트 될 때마다 useEffect가 호출되는 것! useEffect(() => { console.log('컴포넌트가 렌더링될 때마다 호출'); }); 빈 의존성 배열을 사용한 useEffect 사용 -> useEffect 내부의 콜백 함수는 컴포넌트가 처음 마운트될 때 딱 한 번만 실행됨! -> 컴포넌트가 다시 렌더링되어도, useEffect는 다시 실행되지 않음! useEffect(() => { console.log('컴포넌트가 처음 마운트될 때만 호출'); }, []); 의존성 배열에 변수를 포함시킨 경우 -> 해당 변수가..