react/redux (4) 썸네일형 리스트형 [React] redux-saga 시작하기! 기본적인 effects 활용 💥 redux-saga 비동기 작업을 하는 미들웨어가 필요할 때 사용한다. 특정 액션이 발생했을 때 상태 값이나 응답 상태 등에 따라 다른 액션을 디스패치 하거나 추가적인 로직을 적용 해야될 때 사용할 수 있다. api요청, 요청 실패 시 재요청 등의 리덕스와 관계없는 코드를 미들웨어로 실행시킬 수 있다. yarn add redux-saga 또는 npm install redux-saga ❗ generator 함수 generator 함수는 일반 함수와는 다르게 함수 코드 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 함수이다. yield는 중단점을 만든다. yield 뒤에 값이 있으면 그걸 객체의 value에 담아 return하고 멈춘다. 아래와 같이 function*로 선언한다. next()를 .. [React] redux-actions로 가독성 높이기 🔸 redux-actions yarn add redux-actions 액션 생성 함수를 더 짧은 코드로 작성할 수 있게 해준다. 리듀서를 작성할 때 switch문이 아닌 handleActions라는 함수를 사용할 수 있게 해준다. 🔸 createAction 액션 생성 함수를 만들어주는 함수이다. 직접 객체를 만들 필요 없어 훨씬 간단하다. createAction을 사용하지 않았을 때 const CHANGE_USER = 'user/CHANGE_USER'; // 액션 생성 함수 export const change_user = user => ({type: CHANGE_USER, user}); createAction을 사용했을 때 import { createAction } from 'redux-actions';.. [React] useSelector, useDispatch로 state에 접근하기 🔹 react-redux yarn add react-redux 또는 npm install react-redux state를 조회하기 위한 useSelector를 사용할 수 있다. action을 발생시키기 위한 useDispatch를 사용할 수 있다. 🔹 useSelector connect함수를 이용하지 않고 리덕스의 state를 조회할 수 있다. import { useSelector } from 'react-redux' const user = useSelector(state => state.user); 🔹 useDispatch 생성한 action을 useDispatch를 통해 발생시킬 수 있다 만들어둔 액션생성 함수를 import한다. import { change_user } from '../module.. [React] 리덕스 시작하기 (redux, react-redux) 🕵🏻♀️ 리덕스를 사용하는 이유 단방향 데이터 흐름의 탄생 양방향 데이터 흐름은 한 개의 모델이 여러 뷰를 조작하거나, 한 개의 뷰가 여러 모델을 조작할 수 있다. 이는 데이터 흐름을 이해하고 버그를 찾는 것을 방해한다. 이와 같은 이유로 단방향 데이터 흐름이 탄생했다. 단방향 데이터 흐름(= redux가 작동하는 방식)은 데이터가 한방향으로만 흐르기 때문에 데이터 흐름을 예측하기 쉽다. 편리한 state 관리 redux를 사용하지 않으면 react 컴포넌트 들은 각각 개별적으로 state를 관리합다. redux를 사용하면 state를 관리하는 전용 장소(store)에서 상태를 관리하고 컴포넌트는 그걸 보여주기만 하는 용도로 쓰인다. 🕵🏻♀️ redux적용 및 개념 ✔ 필요한 패캐지 설치 npm in.. 이전 1 다음
