dukDukz
0730 제너레이터 본문
React 는 redux까지 배워 놓고 응용..!
* 제너레이터에 대해..
yield(중지시킨다는 의미) 가 .next() 했을때 value 로 들어가는데 이거를 return 값이라고 생각하면 된다.
done : true - 끝남
done : false - 아직 안끝남
* 무한 반복인 경우?
const abc = function* () {
while(true) {
console.log('무한반복')
yield
}
}
let a = abc() // 함수를 사용할때는 변수에 담아서.
a.next();
하면 무한반복이라는 콘솔로그가 next를 할때마다 한번씩 찍힌다.
# 미들웨어가 왜 필요한가?
reducer 라는 값이 상태값을 변하게 해주는 아이인데 reducer에서 처리하기 전에 코드가 실행되는게 미들웨이다.
redux = thunk
redux = saga
미들웨어 (비동기) - 중간에 꼽사리
dispatch 에서 reducer로 action값을 전달해서 reducer가 state값을 변하게 한다.
dispatch -(action)/middleware(필요한걸 만드는 역할)-> reducer -> state
예 ) dispatch 에서 login 을 진행할건데 login button 눌렀을때 로그인이라는게 type action값을 전달
id 랑 pw 를 reducer 에 전달.. 근데 reducer 가 할 수 있는건 없어.
맞는지 틀린지 코드작성하기가 까다롭다.
그래서 중간에 하나를 거쳐서 간다면 어떨까 해서 생긴게 미들웨어 (id 와 pw 를 갖고 실제 서버에 요청해서 응답 받고 그 내용을 reducer에게 전달)
state 변경하고 페이지를 리렌더 시킨다.
# redux thunk / redux saga
[configureStore.jsx]
npm install redux-thunk
saga 를 쓰면 요청을 100개 받으면 제일 마지막에 온것만 처리를 하게 된다.
'웹 개발 > React' 카테고리의 다른 글
React Next 기본 틀 (0) | 2021.08.27 |
---|---|
0806 Redux-saga (0) | 2021.08.06 |
0729 Redux (0) | 2021.07.29 |
0727 Styled Component 의 장점 - props 값 전달 가능 (0) | 2021.07.27 |
0727 useInput 커스텀 훅 (0) | 2021.07.27 |