토이프로젝트 진행 중 질문 드립니다!

Question

제로초님 안녕하세요! 강의 듣고 응용하여 토이프로젝트 진행중인 학생입니다.

화면의 말풍선에 실행되는 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을 쓰는 방법이 틀린건지, 리액트에선 다른 방법으로 사용해야 하는 것인지 감이 잡히지 않아 해당 문제를 해결하지 못하여 질문글 드립니다..!

조언 주시면 감사하겠습니다!

머리

캐릭터의 모습

{talking &&

{talking}

} ); }; 코드를 이런 식으로 적었더니 1초가 되어 말풍선이 사라지기 전 빠르게 그 다음 동작을 수행하였을 때 이전에 SAY_RESET을 1초 후에 넘기라는 명령을 수행하여 다음 말풍선이 1초 후가 아니라 그 이전에 빠르게 사라지는 문제가 있습니다. 텍스트가 변경되었을 때 기존의 1초후에 SAY_RESET dispatch하라는 명령을 clearTimeout으로 없애준 뒤 1초 후 명령을 주었다고 생각했는데 실행해보니 이를 무시하고 두개의 SAY_RESET이 찍히고 두번째 말풍선이 빠르게 사라지네요.. ㅠㅠ 제가 setTimeout/cleartTimeout을 쓰는 방법이 틀린건지, 리액트에선 다른 방법으로 사용해야 하는 것인지 감이 잡히지 않아 해당 문제를 해결하지 못하여 질문글 드립니다..! 조언 주시면 감사하겠습니다!

Answer

const timeoutRef = useRef();

useEffect(() => {
timeoutRef.current = setTimeout(function() {}, 초);
return () => {
clearTimeout(timeoutRef.current);
};
}, []);

이런 식으로 useEffect의 return에서 정리해주셔야 합니다.

Answer

말씀해주신 대로 수정했더니 원하는 방향으로 잘 동작합니다! 정말 감사합니다 ㅠㅠ

정중한 전어

토이프로젝트 진행 중 질문 드립니다!

이 글과 비슷한 Q&A

javascript 공부없이 바로 react native 배워도 되나요?

타입스크립트 테스트코드 작성

리액트 셀렉트 박스 질문드려요

onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다