inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

React로 NodeBird SNS 만들기

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

해결된 질문

282

정중한 전어

작성한 질문수 18

0

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

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

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

react javascript

답변 2

1

제로초(조현영)

const timeoutRef = useRef();

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

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

0

정중한 전어

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

next 10 이상에서는 redux dev tool 구동이 안되나요?

0

272

1

세션 갱신 문의 건

0

482

7

배포 진행 후 Highlight updates components render 표시

0

445

1

똑같은 기능을 하는 테이블

0

447

4

관계형

0

312

2

프론트 서버를 이용하지 않는경우

1

299

3

인피니트 스크롤링 사용시 오류

0

278

0

계속 이런에러가 떠서 해결하기는 했는데 어떤 의미인지 모르겠습니다.

0

433

2

req.user가 언제 생성되나요??

0

330

2

Cannot read property 'id' of null 에러

0

333

1

리트윗한 게시글 불러오는 sequelize

0

252

1

result.data에서 images인 이유

0

281

2

takeLatest에 대한 질문입니다.

1

342

2

프론트에서 express를 사용하지 않을때 동적라우팅

0

501

6

getInitialProps가 클라이언트에서 수행되는 이유?

0

258

1

리로드하면 팔로우 언팔로우 값이 초기화 되는 문제입니다.

0

445

2

스타일드 컴포넌트와 className을 통한 스타일 적용의 차이에 대해 궁금합니다

0

585

2

할인 쿠폰 사용이 안되는되요 (848-f9af83f183e3)

0

365

1

nodejs mvc 패턴

0

975

4

사용하고 보니, 람다 구성이 궁금합니다!

0

266

1

제로초님

0

445

1

새로고침 로그인 풀림 문제.

0

247

1

안녕하세요. 강의 너무 감사합니다

0

157

1

제로초님

0

170

1