19.12.19 하이오더 컴포넌트 & generator

curring 기법

: 보통의 미들웨어 구조는 아래와 같은 curring 기법으로 사용이 된다.

const middleware = (store) => (next) => (action) => {
	next(action)
};

하이오더 컴포넌트라는 것으로
기존 컴포넌트 위를 다른 함수로 덮어 강화시키는 것이다.
=> 훅스로 대체 가능

hoc(Component);

const hoc = (Component) => () => {
	return (
    	<Component hello="i am hoc" />
    )
}

connect(mapStateToProps)(Component)

const connect = (mapStateToProps) => (Component) => () => {
	return (
    	<Component props={mapStateToProps()} />
    )
}

---

리덕스는 타이머 동작을 할 수 없는 동기적인 진행 방식이라
리덕스사가라는 걸 사용한다.

generator 함수

: 함수 실행 중간에 멈출 수 있고
기존 컴포넌트에 props 같은 것을 추가할 때 사용한다.

function* generator(){
	console.log(1);
    console.log(2);
    yield;
    console.log(3);
}
const gen = generator();

콘솔에 gen.next(); 찍으면
1
2
보이고 다시 gen.next(); 찍으면
3
이 보인다
=> 즉, yield 를 기점으로 함수 진행이 중단이 되고 next를 통해 그 이후부터 진행이 된다.

function* generator(){
	console.log(1);
    console.log(2);
    yield 5;
    console.log(3);
}
const gen = generator();

yield 값 뒤에 5를 넣어주고 콘솔에 gen.next(); 찍으면
{value: 5, ...} 와 같이 value 로 나온다.

function* generator(){
	yield* [1,2,3,4];
}
const gen = generator();

콘솔에 gen.next(); 찍으면
{value: 1, ...}
콘솔에 gen.next(); 찍으면
{value: 2, ...}
=> yield* 뒤의 값을 순서대로 찍어준다.