middlewares & libraries

리액트 상태 관리 라이브러리 (가장 많이 사용하는)컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리 → 더 효율적인 관리 가능컴포넌트끼리 똑같은 상태 공유 필요 시 → 여러 컴포넌트 거치지 않고 손쉽게 상태 값 전달/업데이트 가능최적화(실제 업데이트 필요한 컴포넌트

src/index.js → 스토어 제작 & 리액트 app에 리덕스 적용 작업형태 예시스토어 사용 위해→ <App/>를 <Provider>로 감쌈<Provider>'react-redux' 제공store: props로 전달리덕스 개발자 도구크롬 확장 프로그

더 짧게 작성 → 가독성 ⬆, 객체 직접 작성xcreateAction 사용(액션에 필요한) 추가 데이터 : payload형태기본형 예시예시 1. 액션 생성 함수 파라미터를 payload에 변형을 주어서 넣고 싶다면creatAction 2번째 함수에 따로 선언예시 2.

hooks(react-redux 제공)로 컨테이너 컴포넌트 제작 가능 (connect 대신)리덕스 상태 조회 가능사용법 const 결과 = useSelector(상태 선택 함수)컨테이너 컴포넌트에서 액션을 디스패치 할 때 사용useCallback과 함께 사용 추천컴

리액트 웹 애플리케이션에서 API 연동 시→ API 요청에 대한 상태 관리 잘해야예시요청 시작 → 로딩 중 명시요청 성공 or 실패 → 로딩 끝났음 명시성공 응답에 대한 상태 관리실패 에러에 대한 상태 관리 리액트 프로젝트 + 리덕스 + 비동기 작업 (위와 같은)

(리덕스 사용 프로젝트에서) 비동기 작업 처리 시 (가장 기본적으로) 사용하는 미들웨어함수 형태의 액션 디스패치 가능 액션 생성 함수에서 함수 반환(액션 객체 반환 대신) 창시자 댄 아브라모프(Dan Abramov) Thunk란? 의미: 특정 작업을 나중에 할

웹 요청 비동기 작업 처리 1. API 함수화 (lib/api.js) > axios 사용 API 호출 시, 주로 axios(Promise 기반 웹 클라이언트) 사용 설치 $ yarn add axios > 함수화 이유 API 호출 함수 → 따로 작성 시,

Redux-thunk와 비교 시 좀 더 까다로운 상황에서 유용 기존 요청 취소 처리 ((불필요한) 중복 요청 방지)특정 액션 발생 시 → 다른 액션 발생 리덕스와 관계 없는 코드(API 요청 등) 실행 시 웹 소켓 사용 시API 요청 실패 시, 재요청redux-

$ yarn add redux-saga들어오는 모든 액션에 대해 특정 작업을 처리ex 가장 마지막 실행된 작업만 수행 (기존 진행 중이던 작업 有 → 취소 처리)여러 액션이 중첩되어 디스패치 되었을 때 → 가장 마지막 액션만 처리 (기존 것들 무시)ex 설정된 시간

흐름'비동기' 액션 타입 선언→ INCREASE_ASYNC, DECREASE_ASYNC 액션 생성 함수 제작 (해당 액션에 대한)→ increaseAsync, decreaseAsync() => undefined를 두 번째 파라미터로 넣음. → 마우스 클릭 이벤트가

oreduxxreact-redux대안 @types/ 를앞에 붙여서 설치 라이브러리의 타입스크립트 지원 여부 확인 방법직접 설치해서 불러와서 확인GitHub 레포를 열어 index.d.ts 파일 유무 확인써드파티 라이브러리 (라이브러리에 타입스크립트 지원 가능하도록

typesafe-actions 란?리덕스를 사용하는 프로젝트에서 액션 생성 함수 & 리듀서를 훨씬 쉽고 깔끔하게 작성 가능하게 하는 라이브러리설치 방법 $ yarn add typesafe-actions typesafe-actions 최신 버전 설치 방법 액션 생성

분리하는 경우파일이 너무 길어질 때 → 아니면 한 파일에 작성분리 이유 상황 : 한 파일에 액션 type, 액션 생성 함수, 액션 객체들의 타입, 상태의 타입, 리듀서를 선언 → 액션의 수 증가 시, 코드가 너무 길어짐 → 개발 할 때, 뭘 찾을 경우 스크롤을

redux-thunk 설치 $ yarn add redux-thunk axios 설치 $ yarn add axios (API 요청 목적) 모두 공식적으로 타입스크립트 지원됨 → @types/redux-thunk 나 @types/axios를 따로 설치할 필요

가장 먼저 해야 할 것thunk(Promise 기반)를 만들어 줌. (1줄로)thunk 만드는 법 액션 생성함수(createAsyncAction 로 만든) & 함수(Promise 를 만드는)를 파라미터로 가져와서 만들음. 단순히 데이터만 바로 조회하는 형태의 코드일

목표프로젝트에서 비동기 작업을 관리하기 위하여 redux-saga 를 사용하는 방법(redux-thunk 대신)을 알아볼 것redux-saga로 똑같이 구현할 것(redux-thunk로 구현했던 것)redux-saga 설치하기이유GET_USER_PROFILE 액션에서

Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph 제작 가능.Atoms컴포넌트가 구독할 수 있는 상태의 단위Selectorsatoms 상태값을 동기 또는 비동기 방식을