JavaScript/Redux
-
Redux | 리덕스 사가를 이용한 비동기 액션 처리JavaScript/Redux 2020. 5. 15. 10:47
리덕스 사가를 이용한 비동기 액션 처리 리덕스 사가는 리덕스에서 비동기 액션 처리를 위해 사용되는 패키지 중 하나 비동기 액션 처리에 많이 사용되는 리덕스 패키지 API 호출을 통해서 서버로부터 데이터를 받아 오는 것이 대표적인 비동기 코드 패키지명 선택 기준 특징 redux-thunk 여러 개의 비동기 코드가 중첩되지 않음 비동기 코드의 로직이 간단함 가장 간단하게 시작 가능 redux-observable 비동기 코드가 많이 사용됨 RxJS 패키지를 기반으로 만들어져서 리액티브 프로그래밍을 공부해야 하기 때문에 진입 장벽이 가장 높음 redux-saga 비동기 코드가 많이 사용됨 제너레이터를 적극적으로 활용 테스트 코드 작성이 쉬움 리덕스 사가 개요 ES6의 제너레이터를 기반으로 만들어짐 모든 부수 효..
-
Redux | Reselect 패키지로 선택자 함수 만들기JavaScript/Redux 2020. 5. 15. 10:17
Reselect 패키지로 선택자 함수 만들기 reselect 패키지는 원본 데이터를 다양한 형태로 가공해서 사용할 수 있도록 도와줌 특히 리덕스의 데이터를 리액트 컴포넌트에서 필요한 데이터로 가공하는 용도로 많이 사용 구현 기능 친구 목록에 연령 제한 옵션과 개수 제한 옵션 추가 연령 제한을 적용한 친구 목록과 연령/개수 제한을 모두 적용한 친구 목록을 보여줌 reselect 패키지 없이 구현해 보기 옵션 선택 컴포넌트 작성 옵션을 선택할 수 있는 기능을 가진 컴포넌트 작성 friend/component 폴더 밑에 NumberSelect.js 파일 작성 import React, { Component } from "react"; class NumberSelect extends Component { onCh..
-
Redux | 리액트 상탯값 리덕스로 관리하기JavaScript/Redux 2020. 5. 15. 09:40
리액트 상탯값 리덕스로 관리하기 리덕스는 리액트뿐만 아니라 자바스크립트를 사용하는 모든 곳에서 사용 가능하지만 리액트와 궁합이 잘 맞음 리액트 컴포넌트의 상탯값과 마찬가지로 리덕스의 상탯값도 불변 객체임 상탯값이 불변 객체이면 값의 변경 여부를 빠르게 확인 가능 → 리액트 성능 향상의 한 가지 요인 리액트에서 리덕스를 사용할 때는 react-redux 패키지가 많이 사용됨 react-redux 패키지 없이 직접 구현하기 앞에서 작성한 친구 목록/타임라인 코드를 기반으로 작성 스토어 분리하기 스토어 객체를 원하는 곳에서 가져다 쓸 수 있도록 별도의 파일로 분리 common 폴더 밑에 store.js 파일 생성 후 아래 코드 입력 import { createStore, combineReducers } fro..
-
Redux | 데이터 종류별로 상탯값 나누기JavaScript/Redux 2020. 5. 14. 17:33
데이터 종류별로 상탯값 나누기 프로그램 안에서 사용되는 데이터 양이 많아지면 모든 액션을 하나의 파일에 작성하거나 하나의 리듀서 함수로 작성할 수 없음 리덕스에서 제공하는 combineReducer 함수를 이용하면 리듀서 함수를 여러 개로 분리 가능 실습 프로젝트 생성 CRA 기반 프로젝트 생성 $ npx create-react-app redux-test # src폴더 밑에서 index.js 파일을 제외한 모든 파일 삭제 # index.js 파일의 내용도 지우고 다음 두 개의 패키지 설치 $ npm i redux immer 구현 기능 ① 타임 라인 사용자에게 보여 줄 여러 개의 게시물을 관리 각 게시물 데이터를 배열로 관리 게시물의 CRUD가 가능해야 함 무한 스크롤 기능이 필요하기 때문에 페이지 번호도..