리액트 프로젝트에서 효율적인 API 설계와 타입스크립트 활용법

타입스크립트로 API 응답 구조 설계하기

interface ApiResponse {
    success: boolean;
    data: T | null;
    error: string | null;
}

interface PaginationResponse {
    totalPages: number;
    currentPage: number;
    items: T[];
}

const fetchProducts = async (): Promise>> => {
    // API 호출 로직
};

 

 

 

 

쿼리 키 전략과 데이터 관리

리액트 쿼리를 할 때 쿼리키를 효과적으로 관리하면 캐싱과 성능 최적화에 매우 중요

쿼리 키를 잘 설계하면 불필요한 API 호출을 줄이고, 데이터의 최신 상태를 유지할 수 있기 때문

const queryKeys = {
    dashboard: 'dashboard',
    dashboardDetails: (id: string) => ['dashboard', 'details', id],
};

const fetchDashboardDetails = async (id: string) => {
    return useQuery(queryKeys.dashboardDetails(id), fetchDetailsApi);
};

 

 

 

 

리액트 컨텍스트와 테마 관리

리액트 프로젝트에서 테마를 관리할 때 리액트 컨텍스트를 활용하면 효율적으로 테마를 관리할 수 있음 (다크모드 등)

리액트 컨텍스트는 전역 상태를 관리할 수 있는 강력한 도구를 제공하며,

특정 컴포넌트 계층에서만 테마를 적용할 수 있도록 유연성을 제공하기 때문

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');

    const toggleTheme = () => {
        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
    };

    return ({children});
};

const useTheme = () => React.useContext(ThemeContext);

 

 

 

 

 

 

Reference

https://f-lab.kr/insight/react-api-design-typescript-20251209

리액트 프로젝트에서 효율적인 API 설계와 타입스크립트 활용법