본문 바로가기

Redux

(5)

Redux-Toolkit 에서 Saga 사용하기 (Feat. Typescript) 오늘 포스트는 Redux-Toolkit 과 Redux-saga를 사용하여 비동기로 API를 받아와보자 타입스크립트와 함께 ! 우선 본격적으로 코드를 보기에 앞서 Saga에 대해 알아보자 Redux-Saga 에 대하여 redux-saga 는 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을, 더 쉽고 좋게 만드는 것을 목적으로하는 라이브러리이다. saga는 애플리케이션의 사이드 이펙트만을 담당하는 별도의 쓰레드라고 보면 되고, redux-saga는 미들웨어이기 때문에 saga라는 쓰레드가 애플리케이션의 redux 액션을 통해 실행되고, 멈추고, 취소할 수 있게 한다. 또 모든 redux 애플리케이션의 상태에 접근할 수 있고 redux..

Redux Toolkit 에 대하여 알아보기 리덕스를 공부하다 Velopert님의 블로그에서 Redux Toolkit이 리덕스 개발의 필수품이라는 글을 읽고 Redux Toolkit에 대해 흥미를 가지고 공부를 시작했다. Redux Toolkit의 탄생 이유 Redux Toolkit은 리덕스공식 홈페이지에서 해당 관심사를 해결하기 위하여 만들어 졌다고 한다 Redux 저장소 구성이 너무 복잡다 Redux가 유용한 기능을 수행 할 수 있도록 많은 패키지를 추가해야 한다 Redux에는 보일러플레이트 코드가 너무 많이 필요하다 ( 액션타입, 액션생성함수, 리듀서 3가지가 필요하다 ) 즉 Redux Toolkit은 리덕스를 더욱 편리하게 사용하기 위하여 만들어진 도구이다 Redux Toolkit의 특징 Redux Toolkit에는 다음과 같은 기능이 제공..

리덕스에서 Hooks 사용하기 리덕스 스토어와 연동되어있는 컨테이너 컴포넌트를 만들 때 connect 함수를 사용하지 않고 react-redux에서 제공하는 Hooks를 사용하여 컴포넌트를 만들어 보자 useSelector로 상태 조회하기 useSelector Hook을 사용하면 connect 함수를 사용할 필요 없이 리덕스의 상태를 조회할 수 있다 ! import React, { useCallback } from 'react'; import { useSelector } from 'react-redux'; import Counter from '../components/Counter'; import { increase, decrease } from '../modules/counter'; const CounterContainer = ()..

리덕스 작업환경 설정 및 사용방법 리덕스를 사용하기위해 설치해야할 라이브러리들과 리덕스에서 사용하는 방법들을 알아보자 🌌 작업 환경 설정 리액트 프로젝트를 생성하여 그 디렉토리로 이동한 이후 $ yarn add redux react-redux yarn 명령어를 사용하여 리덕스와 react-redux 라이브러리를 설치한다 🎨 디자인패턴 리액트 프로젝트에서 리덕스를 사용할 때 많이 사용하는 패턴은 Presentational and Container Component Pattern 이다 Container 컴포넌트는 리덕스와 연동하여 리덕스로부터 상태를 받아 오기도 하고 스토어에 액션을 디스패치 하기도 한다 Presentational 컴포넌트는 상태 관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트이다 ..

리덕스란 무엇인가 ? 내가 리덕스를 공부하는 이유 처음 리액트 공부를 할 때 리액트를 배우고 나서 리덕스를 배우는 과정이었는데 리액트를 배우고 리액트 만으로 이루어진 프로젝트를 만든 이후에 리덕스 공부를 해야지 라고 생각했었는데, 그 때는 리덕스가 무엇인지, 개발에서 어떤 역할을 하는지 전혀 모르는 상태였다. 리액트 공부를 하다보니 하위 컴포넌트에게 State를 전달하는 것이 무척이나 귀찮은 일이라고 생각했었는데 이를 해결할 만한 도구가 없나 찾아봤더니 리덕스였고 이제 리덕스를 배워보려 한다 😉 🔍 리덕스 소개 리덕스는 가장 사용률이 높은 상태관리 라이브러리이다. 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로 충분하지만, 프로젝트의 규모가 커지면 상태 관리가 굉장히 번거로워질 수 있다. 리액트에서 리덕스..

이전 1 다음

티스토리툴바