atomicdev 님의 블로그

미들웨어 간소화Redux Toolkit의 createAsyncThunk 사용Redux Toolkit의 createAsyncThunk를 사용하면 비동기 작업과 관련된 코드가 크게 간소화됩니다. 이번 포스팅에서는 React 애플리케이션 생성부터 실행까지의 세부 과정과 파일 구조를 함께 설명하며, Redux Toolkit을 사용하여 비동기 작업을 어떻게 쉽게 구현할 수 있는지 살펴보겠습니다.1. React 애플리케이션 생성 및 Redux Toolkit 설치먼저 Redux Toolkit을 사용할 애플리케이션을 생성합니다.npx create-react-app my-redux-toolkit-appcd my-redux-toolkit-appnpm install @reduxjs/toolkit react-redux2. 전..

Redux Toolkit을 사용한 성능 개선 방법이번 포스팅에서는 Redux Toolkit을 사용하여 Redux의 성능을 개선하는 방법을 설명합니다. 특히 createSlice, configureStore, useSelector, createAsyncThunk, Reselect 등을 사용하여 기존 방식과 비교하여 얼마나 성능을 최적화할 수 있는지를 Before -> After 형식으로 알아보겠습니다.1. 성능 최적화의 필요성Redux를 사용하는 애플리케이션은 전역 상태가 자주 변경될 경우 성능 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해 Redux Toolkit을 도입하여 성능 최적화를 도모합니다. 이제 각 기능을 Before -> After 형식으로 설명합니다. Before: 기존 Redu..

Redux Toolkit을 사용해서 Redux 기능 개선하기이번 포스팅에서는 Redux Toolkit을 사용하여 Redux의 초기 설정 복잡성을 해결하는 방법을 설명합니다. 특히 createSlice와 configureStore를 사용하여 기존 방식과 비교하여 얼마나 간소화될 수 있는지를 Before -> After 형식으로 실습 코드 위주로 알아보겠습니다.1. 초기 설정의 복잡한 문제 해결 방법Redux를 처음 사용하는 개발자들은 초기 설정이 복잡하고 번거롭다고 느낄 수 있습니다. 기존 방식에서는 스토어, 리듀서, 액션 등을 여러 파일에 분리하여 작성해야 했지만, Redux Toolkit을 사용하면 이러한 과정을 간소화할 수 있습니다. 먼저 기존 방식과 Redux Toolkit 방식을 비교해 보겠습니다..

초기 설정의 복잡성 해결Redux를 처음 사용할 때 많은 개발자들이 느끼는 문제 중 하나는 복잡한 초기 설정입니다. 스토어 설정, 리듀서 작성, 액션 생성 등 다양한 설정을 위해 여러 파일을 만들어야 하고, 각각의 설정 과정을 직접 처리해야 하기 때문에 진입 장벽이 높게 느껴질 수 있습니다. 이번 강의에서는 이러한 초기 설정의 복잡성을 Redux Toolkit을 사용하여 간단히 해결하는 방법을 배워보겠습니다.기존 Redux의 설정 과정기존 Redux를 사용할 때는 다음과 같은 단계가 필요합니다:스토어 설정: createStore와 미들웨어를 사용해 스토어를 생성합니다.리듀서 작성: 각 상태에 대한 리듀서를 작성하고, 이들을 하나로 합치는 작업이 필요합니다.액션 생성: 상태를 변경하기 위해 액션 타입과 액..

Redux Toolkit 소개 및 실전 사용이번 강의에서는 Redux Toolkit을 소개하고, 이를 통해 Redux의 복잡한 설정 과정을 단순화하는 방법을 배웁니다. Redux Toolkit은 createSlice와 configureStore와 같은 유용한 툴을 제공하여 Redux의 설정을 쉽고 효율적으로 처리할 수 있게 도와줍니다.1. Redux Toolkit이란?Redux Toolkit은 Redux를 쉽게 설정하고, 보일러플레이트 코드를 줄여주는 유틸리티를 제공합니다. 전통적인 Redux 사용법에서는 action, reducer, store 등을 모두 별도로 작성해야 하지만, Redux Toolkit은 이를 간소화하고 다양한 기능을 내장하고 있습니다.주요 특징:createSlice: 액션과 리듀서를..