Junnnho

redux-saga을 사용하기 위해 기본이 되는 제너레이터에 대해서 알아보자

* 기호를 사용해서 제너레이터를 선언할 수 있다.

함수 f1은 제너레이터 함수이다.

제너레이터 함수를 호출하면 제너레이터 객체가 반환된다.

코드에서 보이는 로그는 실행과정을 표현하기 위해 작성한 것이다

제너레이터 객체에는 next()라는 메서드가 있다

위 코드에서 next()를 처음 실행하면, 로그를 출력하고 yield 10이 실행된다

반환 값을 보면 yield 옆의 10이라는 값이 value로 반환되는 것을 볼 수 있다

마지막 next()를 실행하면 return 옆의 finished가 value로 반환되는 것과, done이 true로 반환되는 것을 볼 수 있다

제너레이터를 제대로 이해하려면 iterator와 iterable을 이해해야 한다

iterator - 반복자

반복자 객체인 iterator는 다음과 같은 조건을 만족한다

- next 메서드를 가지고 있다

- next 메서드는 value와 done 속성값을 가진 객체를 반환한다

- done 의 속성값이 true일 때 작업이 끝났음을 의미한다

즉 위에서 본 제너레이터 객체갸 iterator 이다

iterable - 반복 가능 객체 

- Symbol.iterator 속성값으로 함수를 갖고 있다

- 해당 함수를 호출하면, 반복자 객체 iterator를 반환한다

위에서 만든 제너레이터 객체 gen으로 설명하면

console.log(gen[Symbol.iterator]() === gen); // true

제너레이터 객체에는 Symbol.iterator 라는 속성값이 있는데, 이 함수를 실행하면 자기 자신이 나오게 된다

그래서 제너레이터 객체는 iterator 이면서 iterable 이 된다

배열에는 iterator 가 있다는 것을 알고 있을 것이다

마찬가지로 배열처럼 선형 가능한 자료구조에는 iterator가 있다.

이런 자료구조에는 Symbol.iterator 라는 속성값이 있기 때문에 iterator 객체를 얻을 수 있고 next 를 호출할 수 있다

iterable을 만족하면 자바스크립트의 몇가지 기능을 사용할 수 있다

예를 들면 for - of 같은 메서드나, 전개연산자 ...iterator객체 와 같이 사용이 가능하다

제너레이터로 위와 같이 코드를 사용하는 것과

일반적인 코드로 위와 같은 코드를 사용하는 것은 매우 다르다

위를 콘솔로 찍어보면 아래와 같다

일반적인 코드로 위 반복문을 실행했다면 멈출 수 없는 무한루프 코드가 될 것이다

하지만 제너레이터는 위처럼 값을 하나씩 가지고 올 수 있다

이게 가능한 이유는 제너레이터는 '실행'을 멈출 수 있기 때문이다

실행을 멈추고 실행 권한을 외부에 위임한다는 의미이다

그리고 외부에서 어떤 신호가 왔을 때 다시 실행할 수 있다

generator에 대한 설명은 ko.javascript.info/generators

여기에서 정말 자세하게 설명해주고 있기 때문에 한번 읽어보는 것을 추천한다. 아니 권장한다

redux-thunk 

비동기 로직이 간단할 때 사용한다

대체적으로 간단한 편

redux-observable

비동기 코드가 많을 때 사용한다

RxJs 패키지를 기반으로 만들어졌으며, 리액티브 프로그래밍을 공부해야하기 때문에 진입장벽이 높다

redux-saga

비동기 코드가 많을 때 사용한다

제너레이터를 활용한다

테스트 코드 작성이 쉽다

redux-saga

제너레이터에 대한 기본 이해가 필요하다

제너레이터에 대한 설명은 => junho0956.tistory.com/364

redux-saga와 제너레이터를 이용하여 아래와 같은 코드를 작성할 수 있다

function 옆의 *, yield, all, takeLeading 은 generator를 의미하는 기호 및 제공하는 함수이다

all 안에는 여러 개의 배열을 넣을 수 있으며,

takeLeading의 첫번째 매개변수는 redux에서 사용하는 액션이다

takeLeading의 특징은 현재 진행중인 액션이 있을 때, 추가로 요청되는 액션이 있으면 무시하게 된다.

즉 여러가지 요청된 액션 중에서, 우선순위가 첫번째로 들어온 액션이 높다 판단하고 실행되는 것이고,

이와 반대로 takeLatest 는 마지막에 들어온 액션을 가장 높은 우선순위로 처리하게 된다.

첫번째 매개변수인 action이 dispatch되면 두번째 매개변수의 fetchData 라는 함수가 실행되는 형태이다

아래의 fetchData를 확인해보자 

fetchData 함수 역시 제너레이터 타입이고, action 객체를 매개변수로 받는다.

함수 내부에는 put, call 이라는 함수가 있는데, 이 역시 redux-saga에서 제공하는 함수이다.

put 은 redux action을 dispatch하는 함수로, 매개변수로 선언한 액션을 발생시키는 함수이다.

call 역시 매개변수에 있는 함수를 실행하는 함수이다.

put 과 call은 비슷해보이지만,

put은 store에 있는 action을 dispatch하는 것이고, call은 임의의 지정한 사용자 함수를 실행하는 것이다.

이런 함수들은 saga에서 부수효과라고 언급하기 때문에, import 할 때 redux-saga/effects 를 사용한다

redux-saga의 부수효과 함수들은 해야할 일을 설명하는 자바스크립트 객체를 반환한다.

반환된 객체는 yield를 호출했을 때 saga 미들웨어에게 전달이 되는데,

redux의 미들웨어 쪽에서 saga 미들웨어가 실행되고 있는데, 

saga미들웨어가 반환받은 '해야할 일을 설명하는 javascript 객체'를 보고 '해야할 일'을 진행한 후에

그 결과와 실행 흐름을 다시 제너레이터로 넘겨주게 된다.

store 에서 saga를 사용해보자

saga를 사용하기 위해서 redux-saga에서 제공하는 createSagaMiddleware 가 필요하고,

위에서 saga 코드를 작성해둔 export default function* 파일을 가져와서 아래와 같이 작성한다.

createSagaMiddleware 함수로 sagaMiddleware를 생성하고, 

이를 redux store에 Middleware 적용함수인 applyMiddleware로 추가시켜준다.

제너레이터로 선언한 rootSaga 의 timelineSaga는 위에서 언급한 saga 코드를 가져온 것이며,

이를 적용시키기 위해 all 함수 내에 인자로 넣어준다.

saga 코드가 여러개인 경우에도, all 인자로 추가해서 넣어주면 된다.

그 후에, saga middleware의 실행함수인 run에 선언해둔 saga 코드의 모음인 rootSaga를 매개변수로 넣어주면

사가 미들웨어가 실행되어서 사가를 사용할 수 있게 된다.

useRef

꼭 돔요소를 참조할 때만 사용하는 건 아니다.

UI 데이터가 아니더라도 렌더링과 상관없는 값을 저장할 때 useRef가 사용될 수 있다.

예를 들면) 값의 변화가 있어도 렌더링 결과가 같을 때는 굳이 useState보다는 useRef를 사용하는 것

이전 상태값을 기억하고 싶을 때도 useRef를 사용할 수 있다.

일반 변수로는 이전 값을 재활용할 수 없기 때문에 useRef 같은 훅을 사용할 수 있다.

useMemo

메모이제이션 기능을 제공한다 => 이전 값을 재활용할 수 있다.

계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.

useEffect와 마찬가지로 의존성 배열을 사용해서

이미 실행해둔 함수의 결과값을 저장해두고, 의존성 배열 내부 값이 변경될 때만 함수를 사용해고

값이 변경되지 않았을 때는 저장해둔 값을 재사용하는 방식

useCallback

메모이제이션 기능을 제공한다 => 이전 값을 재활용할 수 있다.

useMemo 훅과 비슷하다.

특히 함수 메모이제이션에 특화된 훅이다.

useMemo와 useCallback은 비슷해서 헷갈리기 쉬운데,

useMemo는 결과'값'에 대한 상태값을 저장하고,

useCallback은 함수'자체'를 저장한다.

useReducer

여러 개의 상태값을 하나의 훅으로 관리할 때 사용하면 편하다

여러 개의 상태값으로 많은 로직을 다뤄야 할 때 사용하는데,

상태값은 객체로 다룰 수 있고,

상태값 변경 함수는 action을 발생시키는 dispatch 형태이다.

type을 통해서 여러가지 상태값을 구분해주자

useImperativeHandle

클래스형 컴포넌트의 부모컴포넌트는 ref 객체를 통해서

자식 컴포넌트의 메서드를 호출할 수 있다.

이 방식은 자식 컴포넌트의 내부 구현에 대한 의존성이 생긴다.

useImperativeHandle 훅을 사용하면 함수형 컴포넌트에서도 멤버변수(함수)를 사용할 수 있다.

즉 자식 컴포넌트가 제공하는 값을 부모 컴포넌트가 사용할 수 있는 것

useLayoutEffect

useLayoutEffect 훅은 useEffect 훅과 거의 비슷하게 동작하지만,

부수효과 함수를 '동기'로 호출한다는 것이 다르다.

즉 렌더링 결과가 돔에 반영된 직후에 바로 호출된다.

동기로 즉시 실행하기 때문에 가급적 연산이 많은 부수효과는 useEffect에서 호출하는 것이 맞다.

useLayoutEffect는 대체로 이런 경우에 사용한다.

렌더링 직후에 돔 요소의 값을 읽어들이는 경우,

조건에 따라 컴포넌트를 다시 렌더링하고 싶은 경우

렌더링을 하고 실제 돔에 반영은 했지만 브라우저가 화면에 돔을 그리는데 걸리는 시간이 있다.

이때 useEffect를 사용하면 비동기를 사용하기 때문에 브라우저가 화면을 그리고 나서 원하는 코드가 실행될 수도 있다.

useLayoutEffect는 브라우저가 화면을 그리기 '전에' 동기로 즉시 실행되기 때문에 좀 더 빠르게 원하는 컴포넌트 형태를

조절할 수 있는 것이다. 

useDebugValue

리액트 개발자 도구에 좀 더 많은 정보를 제공할 수 있는 훅

code로 개발하면서 필요한 단축키/json 중에 유용했던 것들을 저장해두겠습니다.

생길 때 마다 수정하겠습니다.

같은 단어 모두 다 선택하기

단어를 선택한 다음에 ctrl+shift+L

jsconfig.json

// auto import 가능
{
    "compilerOptions": {
        "jsx":"react",
        "module":"commonjs",
        "target":"es6",
        "checkjs":true // typescript 처럼 타입체크가능
    },
    "exclude":["node_modules"]
}