#3 Today I Learned - 21.01.06

@ye-r1·2021년 1월 6일

JavaScript React axios destructuring assignment generator function redux saga redux-saga-effect yield

til

목록 보기

3/11

Today I Learned 📝

redux-saga : function*(){ }, redux-saga-effect
redux-saga : saga 사용법
javascript : 구조 분해 할당
javascript : axios

redux-saga : function*(){ }, redux-saga-effect

redux를 사용할때 특정 action을 관찰하고 있다가 action이 실행되면서 동시에 다른 행동을 취할 수 있게 해 주는 함수이다.

주로 back-end 통신을 할때 많이 사용한다.

Generator function

function* name() {
	yield
	yield
}
해당하는 값이 나올때까지 실행하다가 해당하는 yield 값이 있으면 거기서 return하고 next() 를 기다리는 함수이다.

redux-saga-effect
effect들은 generator function을 사용하여 이루어진다.

call : 함수를 동기적으로 실행, ~~( api 사용할때 )~~

all : 여러 saga를 한번에 실행, 배열로 [] 내보낸다.

fork : 함수를 비동기적으로 실행

takeLatest : 짧은 시간내에 액션이 관측되면 그 액션이 들어온 맨 마지막 것만 받아서 실행

delay : 매개변수에 있는 시간만큼 잠깐 멈춤

put : dispatch()와 동일

~~saga에서는 arrow function 을 쓸 수 없다.~~

redux-saga : saga 사용법

/redux/sagas.js

import {all} from "redux-saga/effects";
import appSaga from "./app/saga";
import userSaga from "./user/saga";

export default function* (){
    yield all([
        appSaga(),
        userSaga(),
    ])
}

먼저 generator function을 만들고 all() 함수를 이용해 여러개의 saga를 한번에 실행한다.

/redux/store.js

import {/*createStore*/, applyMiddleware} from "redux";
//import reducers from "./reducers";
import createSagaMiddleware from "redux-saga";
import sagas from "./sagas";

const sagaMiddleware = createSagaMiddleware();
const store = createStore(/*reducers*/, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(sagas);

//export default store;

createSagaMiddleware 를 redux-saga에서 가져와서 saga를 생성한다.
기존 createStore 인자 값에 생성한 saga함수를 =sagaMiddleware applyMiddleware()로 감싸서 추가한다.
그리고 sagaMiddleware 인자 값에 sagaMiddleware.run() saga들을 합친 sagas.js를 import하여 sagaMiddleware를 실행시킨다.

/api/index.js

import axios from "axios";

const API = {
    getUsers: () => axios.get("https://jsonplaceholder.typicode.com/users")
}

export default API;

axios get을 통해 url로 data를 요청한다.

/view/pages/User/index.js

useEffect(() => {
	userActions.getUsers();
},[])

렌더링이 될 때 액션을 실행한다.

/redux/user/saga.js

import {all, takeLatest, call, put} from "redux-saga/effects";
import {Action} from "../user/redux";
import API from "../../api";
import {userActions} from "../actionCreators";

export default function* (){
    yield all([
        takeLatest(Action.Types.GET_USERS, function* (){
            const result  = yield call(API.getUsers);
            if(result?.data) {
                yield put(userActions.updateState({
                    users: result.data,
                }))
            }
        })
    ])
}

먼저 여러 saga를 한번에 실행해주는 all 함수를 실행한다.
그리고 data를 받아오기위해 가장 최근에 일어난 것만 받아서 실행하는 takeLatest 함수를 작성하여 첫번째 인자로는 실행할 type의 action을 넣고, 두번째로 콜백함수 generator function을 넣어준다.
axios로 http 통신하여 api data를 가져오는 파일을 분리 시켜줬었는데 export한 파일을 불러와서 yield call(API.getUsers) 함수를 동기적으로 호출한다. 이 과정에서 call을 할때 자동으로 promise가 벗겨진다.
만약 axios로 불러온 data가 있을 경우에만 put() 을 사용하여 action 생성자 함수를 호출하고 user 객체를 redux에 dispatch한다.

javascript : 구조 분해 할당

기본 객체구조 분해

const user = {
    name: 'name',
    gender: 'female'
};
const { gender } = user;
console.log(gender);  // 'female'

새로운 변수명 할당하기

const user = {
    name: 'name',
    gender: 'female'
};
const { gender : newGender } = user;
console.log(newGender);  // 'female'
객체구조 분해시 새로운 변수명을 대입해 gender : newGender 사용 할 수 있다.

기본값 할당하기

const user = {
  name: 'name',
  sns: [
    'facebook',
    'instagram',
  ]
};
const { sns = [] } = user;
console.log(sns);  // Array

만약 user의 값이 정의되지 않았다면 에러가 난다. 이를 막기 위해 구조분해시 기본값을 할당 sns = [] 할 수도 있다.
결과적으로 기본값으로 빈 Array를 내 뱉기 때문에 Data가 없더라도 error가 나지 않는다.

새로운 변수명과 기본값 할당하기

const user = {
  name: 'name',
  sns: [
    'facebook',
    'instagram',
  ]
};
const { sns : newsns = [] } = user;
console.log(newsns);  // Array

또한 기본값을 할당하면서 동시에 새로운 변수명을 선언하는것도 가능하다.

즉시 구조 분해 하기

function Home({data, dispatch}) {

}

인자값 (arguments) 안에서도 바로 할당이 가능하다.

javascript : axios

axios는 http 통신을 위한 자바스크립트 라이브러리이다. 비동기통신으로 data를 가져올 수 있다.

useEffect( () => {
  
}, [])

axios 사용시 통신을 무한 loop에 빠지지 않게 하기 위한 방법으로 react hook인 useEffect를 사용해 처음 렌더링 될 때에만 실행시켜줄 수 있다.
useEffect 훅은 뒤에 인자값으로 [] 빈 배열을 넣어주면 처음 렌더링 될 때에만 실행시켜준다.

axios.get()은 url로 data를 호출해온다.