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

→2023.05.02

Front-End/React

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를 담는 ..

→2023.04.19

Front-End/React

React-saga를 통해 axios 호출 취소하기

회사 프로젝트에서 특정 수치를 조회하기 위해 사용하는 API가 있다. 이 API는 상황에 따라서 호출 시간이 오래 걸리고, 조회 항목이 많아질수록 호출 시간이 길어진다. 만약 사용자가 수치를 조회하는 중 화면을 나간다면, 수치 조회 API는 여전히 Pending 중이기 때문에 그 영향으로 새로 렌더링 되는 화면의 로딩이 길어지게 된다. 수치 조회 API의 응답을 기다리는 중 현재 페이지가 unmount된다면, 해당 API 호출을 취소하여 불필요한 데이터 호출을 막고, UX를 개선하려 한다. 현재 프로젝트에서 비동기 통신 라이브러리는 axios 사용, 비동기 로직은 react-saga 로 관리 중이다. 따라서 이 글에서는 이 두 라이브러리를 사용하여 API 호출을 취소하는 방법을 다룬다. Axios의 취소..

→2022.11.26

Front-End/React

[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" ..

→2022.11.19

Front-End/React

[React] 효율적으로 모달 관리하기

무려 3개월 만에 돌아왔습니다... 이 글은 Portal을 사용한 모달창 만들기에서 이어집니다. 모달을 필요한 컴포넌트에서 그때그때 렌더링 하는 방법은 불필요한 코드를 늘리며, 각각의 컴포넌트에서 모달에 관련된 로직까지 담당하게 되어 컴포넌트의 단일 책임 원칙을 위반한다. 모달의 상태를 전역으로 관리하여 필요한 곳에서 호출만 해주면 되도록 변경한다면 위에서 언급한 문제점들을 해결할 수 있다. 먼저 context API를 사용한 방법, 그리고 Redux를 사용한 방법에 대해서 차례대로 알아보자. 1️⃣ context API를 사용한 모달 관리 // context/ModalProvider.js import React, { useState } from "react"; export const ModalState..

→2022.09.12

Front-End/React

[React] 다크모드 적용하기 ( with. Styled-component, Context API)

다크 모드는 어두운 배경을 중심으로 전반적인 요소를 어두운 색상 체계로 구성한 low-light UI를 지칭한다. 스마트폰과 같은 디바이스의 사용량이 증가면서, 눈의 피로를 덜어주고 집중력을 높여준다는 이유로 다크모드가 등장하였다. 현재는 수많은 웹사이트들이 다크모드를 옵션으로 제공하고 있으며, 이제는 모든 서비스들의 필수 항목처럼 되어가고 있다. 이 글은 기존 프로젝트에 styled-component와 context API를 사용하여 다크모드 옵션을 추가하는 과정을 담고 있다. 추가로 다크모드를 적용하기 전에, 지켜야 할 규칙과 가이드라인을 살펴본다. 다크모드 가이드라인 다크모드를 개발하기 전에, 먼저 가이드라인을 찾아보았다. Material Deisgn의 다크모드 가이드라인을 참고하여 특히 주의해야 ..

→2022.08.11

Front-End/React

recoil과 비동기 데이터 호출 (+ 선언적 프로그래밍)

💡 이 글은 'React스러운 상태관리 라이브러리, Recoil을 알아보자' 에서 이어집니다. React스러운 상태관리 라이브러리, Recoil을 알아보자 이제까지의 프로젝트에는 상태 관리 라이브러리로 항상 Redux를 사용했었는데, 그 이유는 단순하게 대부분의 사용자들이 redux를 사용했고, 사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라 leego.tistory.com recoil에서는 selector 를 사용하여 비동기 데이터를 처리한다. redux에서 비동기 처리를 할 때는 redux-thunk나 redux-saga와 같은 미들웨어를 통해 action을 중간에 인터셉트하여 추가 동작을 수행하였다. 하지만 recoil에서 비동기 처리는 React의 일반 state의 흐름을 벗어나지 않고 거의..

→2022.07.20

Front-End/React

React스러운 상태관리 라이브러리, Recoil을 알아보자

이제까지의 프로젝트에는 상태 관리 라이브러리로 항상 Redux를 사용했었는데, 그 이유는 단순하게 대부분의 사용자들이 redux를 사용했고, 사용자들이 가장 많이 사용하는 라이브러리 = 좋은 라이브러리라는 생각이 있었기 때문이다. Redux는 한때 너무 많은 양의 보일러 플레이트 코드를 작성해야 한다는 단점을 가지고 있었지만, Redux-toolkit의 등장으로 그 단점을 많이 보완되었다. 그럼에도 불구하고, 어떤 프로젝트에서는 전역 상태 관리를 위해 Redux를 설치하는 것이 너무 과하다고 느껴질 때가 있다. 다른 대안, context API 라이브러리를 추가적으로 설치하지 않고 context API를 사용하는것은 어떨까? context API는 일일히 props를 넘겨주지 않고도 컴포넌트 트리 전체에..

→2022.07.16

Front-End/React

[React] CRA에서 redux-toolkit과 redux-saga 초기 설정하기

create-react-app create-react-app은 사용자가 쉽게 개발을 할 수 있도록 개발 환경을 제공해주는 도구이다. CRA에는 브라우저 호환성을 위한 바벨과 웹팩과 등의 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 준다. npx create-react-app '프로젝트 이름' 위의 명령어로 우리는 바로 실행 가능한 react앱을 생성할 수 있다. 이제 create-react-app으로 리액트 프로젝트를 생성하고, redux와 redux-saga 셋팅까지 완료해보자. React 프로젝트 생성 먼저, CRA로 새로운 프로젝트를 만들어준다. 다음과 같은 메세지가 나오면 성공적으로 프로젝트가 만들어졌다는 뜻이다..

→2022.01.22

Front-End/React

[React] 자주 사용하는 Custom hook 소개

프로젝트를 하면서 자주 사용하는 Custom hooks를 모음. 아마도 계속 추가해나갈 예정이다. usePrevious import { useEffect, useRef } from 'react'; function usePrevious(stateOrProp) { const previous = useRef(null); useEffect(() => { previous.current = stateOrProp; }, [stateOrProp]); return previous.current; } export default usePrevious; 가끔 이전 state의 값이 필요할 때가 있다. 예를 들어 useEffect는 deps에 명시한 값이 하나라도 변경되면 로직을 실행한다. useEffect(() => { ....

→2021.10.16

티스토리툴바