dukDukz

0730 제너레이터 본문

웹 개발/React

0730 제너레이터

헤일리_HJ 2021. 8. 5. 20:43

 

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