전체 글
recoil을 사용한 전역 모달 관리(with TypeScript)
이전 포스팅에서 context API, redux를 사용한 모달 관리에 대해서 소개했었다. // store/modalSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = []; export const modalSelector = (state) => state.modal; export const modalSlice = createSlice({ name: "modal", initialState, reducers: { openModal: (state, action) => { const { type, props } = action.payload; return state.concat({ type, props }); }, clos..
react-query는 어떻게 작동할까
QueryClient react-query를 프로젝트에 셋팅할 때, 가장 먼저 하는 것은 앱의 최상위에서 QueryClientProvider로 우리의 앱을 감싸주는 일이다. import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; ... const queryClient = new QueryClient(); function Root() { return ( ); } 우리는 먼저 새로운 QueryClient인스턴스를 생성하고, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다. 이 QueryClient는 단순하게 표현하자면 QueryCache와 MutationCache를 담는 ..
React-saga를 통해 axios 호출 취소하기
회사 프로젝트에서 특정 수치를 조회하기 위해 사용하는 API가 있다. 이 API는 상황에 따라서 호출 시간이 오래 걸리고, 조회 항목이 많아질수록 호출 시간이 길어진다. 만약 사용자가 수치를 조회하는 중 화면을 나간다면, 수치 조회 API는 여전히 Pending 중이기 때문에 그 영향으로 새로 렌더링 되는 화면의 로딩이 길어지게 된다. 수치 조회 API의 응답을 기다리는 중 현재 페이지가 unmount된다면, 해당 API 호출을 취소하여 불필요한 데이터 호출을 막고, UX를 개선하려 한다. 현재 프로젝트에서 비동기 통신 라이브러리는 axios 사용, 비동기 로직은 react-saga 로 관리 중이다. 따라서 이 글에서는 이 두 라이브러리를 사용하여 API 호출을 취소하는 방법을 다룬다. Axios의 취소..
![[React] CRA에서 Path alias 설정하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3Bk6V%2FbtrRAEkQ3Xj%2FpD8kYkD7DjwvgCVtbttbVK%2Fimg.gif)
[React] CRA에서 Path alias 설정하기
(2022.02.14 수정) 이전 프로젝트에서는 괜찮았으나, 이번 React-Query 프로젝트에서는 Atomic system에서 착안한 새로운 폴더 구조를 시도해본 만큼 코드 상단의 무수한 ../../../ 들이 신경 쓰이기 시작했다. 그동안 미뤄왔던 path alias를 설정을 드디어 프로젝트에 적용했고, 그 과정을 여기에 기록해보려 한다. (‘미루고 미루다가 드디어 적용한 것’이라 말하니 뭔가 엄청난 작업을 해야 할 것 같지만 사실 설정은 매우 간단하다.) Path Alias란 path alias는 경로에 별칭을 붙인다는 뜻으로, path alias를 사용하면 "../../../hooks/quires/useMovieDetail"과 같은 경로를 "@hooks/quires/useMovieDetail" ..
![[React] 효율적으로 모달 관리하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcLXOmm%2FbtrLNqTI1W5%2FmEMMkUkJIc8tLsv3AxJMV1%2Fimg.png)
[React] 효율적으로 모달 관리하기
무려 3개월 만에 돌아왔습니다... 이 글은 Portal을 사용한 모달창 만들기에서 이어집니다. 모달을 필요한 컴포넌트에서 그때그때 렌더링 하는 방법은 불필요한 코드를 늘리며, 각각의 컴포넌트에서 모달에 관련된 로직까지 담당하게 되어 컴포넌트의 단일 책임 원칙을 위반한다. 모달의 상태를 전역으로 관리하여 필요한 곳에서 호출만 해주면 되도록 변경한다면 위에서 언급한 문제점들을 해결할 수 있다. 먼저 context API를 사용한 방법, 그리고 Redux를 사용한 방법에 대해서 차례대로 알아보자. 1️⃣ context API를 사용한 모달 관리 // context/ModalProvider.js import React, { useState } from "react"; export const ModalState..