[TIL] async, await으로 비동기 처리 (with useEffect)

😓 수정 전

UserService.saveInfo(type, alias);

issueToken(token.accessToken)
     .then((res) => setNewToken(res.data));

const [expiryTime, role] = parseToken(newToken);

dispatch(login({
      accessToken: newToken,
      expiryTime: expiryTime * 1000,
      role: role
}));
     
navigator("/");

내가 원했던 건... 새로운 토큰을 받아 파싱 후 디스패치 하는 것이었다!
근데 비동기 처리다 보니 응답이 돌아오기 전 parseToken(newToken); 라인을 실행해서
파라미터로 undefined값이 들어가게됐다..

비동기를 동기 방식처럼 진행하게하려고
async, await을 데려왔다!!

😐 수정 중

async, await은 짝으로 같이 써줘야한다!

• async : 함수 명 앞에 !!
• await : async가 붙은 함수 내부, 비동기 처리하는 메소드 앞에 !!

const onClickBtn = async () => {
    if (...) {
		...
    }
    else {
        await UserService.saveInfo(type, alias);
        setNewToken(
            await issueToken(token.accessToken)
                .then((res) => res.data)
        );
        const [expiryTime, role] = parseToken(newToken);
        dispatch(login({
            accessToken: newToken,
            expiryTime: expiryTime * 1000,
            role: role
        }));
        navigator("/");
    }
}

놀랍게도 원하는 대로 되지않았다.

promise.all이라는 것도 있다는데 알아보니 내가 원하는 일을 해주는 애는 아닌 것 같지만 알아두면 도움이 될 것 같다!(여러 동시에 처리돼도 상관없는 비동기 처리를 병렬적으로 수행 후 마지막 태스크가 완료됐을 때 반환해준다고한다.)

😁 수정 후

    useEffect(() => {
        if (newToken != "") {
            const [expiryTime, role] = parseToken(newToken);
            dispatch(login({
                accessToken: newToken,
                expiryTime: expiryTime * 1000,
                role: role
            }));
            navigator("/");
        }
    }, [newToken]);

    const onClickBtn = async () => {
        if (... {
			...
        }
        else {
            await UserService.saveInfo(type, alias);
            setNewToken(
                await issueToken(token.accessToken)
                    .then((res) => res.data)
            );
        }
    }

결국 useEffect를 사용해서 해결했다.
사실 마음에 안든다..
나중에 수정할 듯..
그래도 이것저것 알게돼서 재밌었다 헤헤