Redux 5

[FE] Redux (5): Redux-Saga/ takeEvery / takeLastest (조현영 Redux vs Mobx 복습)

takeEvery, takeLatest 99%의 경우 Whilte(true) 를 뺄 이유가 없다. 항상 반복이 되어야 하는 동작이다. ex) 한번만 로그인하고 한번만 로그아웃 하지는 않음. 다른 유저가 접속했을 때 로그인후 로그아웃하고 다시 로그인 로그아웃을 해야하기 때문에 한번만 실행되는 액션은 없음! takeEvery 그래서 takeEvery라는 것을 지원함. 기존: import { all, fork, takeLastest, takeEvery, call, put, take, delay } from 'redux=saga/effects'; fucntion* watchHello() { while(true) { // 액션을 테이크하는 부분 yield take(HELLO_SAGA); // 실제 동작하는 부분 ..

[React] Front-End 2021.07.21

[FE] Redux (4): Redux-Saga 의 필요성 / 사용법 (조현영 Redux vs Mobx 복습)

Redux-saga의 필요성과 맛보기 로그인 버튼 클릭하는 순간 리덕스 state가 변경된다. 리덕스의 문제는 모든 것이 동기로 일어난다는 점 예를들면 아래가 실행시에 -> 서버쪽에 데이터 전달 -> 서버가 로그인 성공이라는 응답을 보내줌 -> 그걸 다시 받아서 로그인! { type: LOG_IN, data: { id: 'dadong', password: '1234' } } 하지만 리덕스에서는 동기적으로 데이터를 바꾸는 것 밖에 못함 => 리덕스로 dispatch해버리면 바로바로 실행되기 때문에 특정 시간, 또는 특정 동작 이후에 액션을 실행할 수가 없음. 그 중간에 서버에 데이터를 보냈다가, 응답을 보내주는 과정이 필요함. 이걸 리덕스가 못함 그래서 redux-saga를 씀! => 리덕스 기능을 확장할..

[React] Front-End 2021.07.18

[FE] Redux (2) : react-redux / reducer 분리 / Middleware / import vs require

리덕스 폴더구조 // 길어질만한건 action과 reducer 두 가지 reducers 라는 폴더 *보통 대표적인 애들이 index.js reducer.js - 모듈로 만들어주면 됨 - reducer.js 하단에 아래 코드 module.exports = reducer; actions 라는 폴더 action.js - 함수들은 acrion creator index.js에서 reducer, action 불러옴 const reducer = require('./reducer'); const { logIn, logOut, addPost } = require('./action'); 액션도 사용자액션 게시글에대한 액션 이렇게 나뉠 수 있음. 분리의 기준? 데이터! - 관련된건 최대한 묶어주기 - 보통 배열이 되고 덩치..

[React] Front-End 2021.07.16

[FE] Redux (1) 개념 / 사용법 (제로초 Redux 강의 복습)

Reducer - 변수의 개념, INIT_STATE - ex. JoinAgreeCustomer / RegisterCustomerInfo - reducer 정의 시 action에 정의된 type 필요 Actions - Reducer에 있는 init_state 변경 - ex. SaveJoinAgreeCustomer / UpdateRegisterCustomerInfo Dispatch - Container에서 Action 호출하여 Reducer값 변경! - action.js 에 정의해놓은 필요한 액션을 import 해와야 함 - dispatch할 때 이 action을 사용하여 reducer의 값을 변경함 - 호출되어 변경될 때마다 Reducer는 Redering됨 => 이때, 새로운 값으로 새로 만들어 지는 것..

[React] Front-End 2021.07.14

[FE] React : Redux는 왜 쓸까

https://velopert.com/3533 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii) | VELOPERT.LOG 이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케 velopert.com 내용 이해 후 정리 예정

[React] Front-End 2021.06.09