제로초님 안녕하세요! 강의 듣고 응용하여 토이프로젝트 진행중인 학생입니다.
화면의 말풍선에 실행되는 reducer 액션에 따른 텍스트가 보여지는 방식을 만들고자 하는데요!
예를 들어 LOAD_TODOS_SUCCESS를 put할 때에 캐릭터 리덕스의 SAY_LOAD_TODOS 를 함께 put하여 말풍선의 텍스트를 바꾸는 식으로, 사이트의 기능 액션을 실행할 때에 그에 맞는 말풍선 변화 액션을 함께 실행하는 식으로 진행하고 있습니다.
(예시코드.. sagas/todo.js)
function* loadTodos() {
try {
const result = yield call(loadTodosAPI);
yield put({
type: LOAD_TODOS_SUCCESS,
data: {
todos: result.data.todos,
date: result.data.today,
}
});
yield put({
type: SAY_LOAD_TODOS
});
} catch (e) {
console.error(e);
yield put({
type: LOAD_TODOS_FAILURE,
error: e,
});
}
}
(reducers/character.js)
case SAY_LOAD_TODOS: {
draft.talking = `나와라, 오늘의 할 일!`;
break;
}
case SAY_EDIT_TODO: {
draft.talking = `이렇게 고치면 될까?`;
break;
}
case SAY_RESET: {
draft.talking= '';
}
말풍선이 1초 가량 존재하다가 사라지게 하기 위해서 setTimeout을 사용하였는데요.
(문제 되는 코드입니다 components/Character.js)
import styled from 'styled-components';
import React, { useState, useRef, useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { LOAD_HISTORIES_REQUEST } from "../reducers/history";
import { SAY_RESET } from '../reducers/character';
const Character = () => {
const { talking } = useSelector(state=>state.character);
const dispatch = useDispatch();
useEffect(()=>{
if(talking){
clearTimeout(sayReset);
const sayReset = setTimeout(()=>{
dispatch({
type: SAY_RESET
})
}, 1000);
}
}, [talking]);
return (
<>
<Witch>
<div>머리</div>
<div>캐릭터의 모습</div>
{talking && <Talking><p>{talking}</p></Talking>}
</Witch>
</>
);
};
코드를 이런 식으로 적었더니 1초가 되어 말풍선이 사라지기 전 빠르게 그 다음 동작을 수행하였을 때
이전에 SAY_RESET을 1초 후에 넘기라는 명령을 수행하여 다음 말풍선이 1초 후가 아니라 그 이전에 빠르게 사라지는 문제가 있습니다.
텍스트가 변경되었을 때 기존의 1초후에 SAY_RESET dispatch하라는 명령을 clearTimeout으로 없애준 뒤 1초 후 명령을 주었다고 생각했는데 실행해보니 이를 무시하고 두개의 SAY_RESET이 찍히고 두번째 말풍선이 빠르게 사라지네요.. ㅠㅠ
제가 setTimeout/cleartTimeout을 쓰는 방법이 틀린건지, 리액트에선 다른 방법으로 사용해야 하는 것인지 감이 잡히지 않아 해당 문제를 해결하지 못하여 질문글 드립니다..!
조언 주시면 감사하겠습니다!
