render -> effect 흐름 이거 아닌가요?
241
작성한 질문수 9
useEffect에서 승리 검사를 하는데 turn이 달라서 애먹은 부분에서 설명하실 때요.
dispatch하면 recentCell이 바뀌어서 effect가 실행되는데
그 와중에 dispatch(change_turn)을 해서 내가 기대한 turn이 안 나왔다. 비동기를 잘 고려해야한다라고 하셨는데
제가 콘솔 찍어보면 그건 아닌 거 같습니다.
역시나 리액트돔이 dispatch로 발생된 setState들을 다 모아서 한번에 처리한다음 render 해줍니다.
그러면 흐름이
dispatch(click_cell), dispatch(change_turn)
-> render -> useEffect이고
useEffect 내부에서는
현재의 턴이 아니라 이전의 턴으로 승리인지 검사를 해줘야겠죠.
왜냐하면 click_cell시 O였다고 가정하면
change_turn해서 X가 되고
render -> useReducer로 state 받아올 시
turn은 X가 나오겠죠?
click_cell시의 O로 비교를 해야되는데 말이죠.
이거 맞는지 확인 부탁드려요
답변 1
1
아뇨. dispatch(click_cell)과 dispatch(change_turn)은 모아서 처리되지 않습니다. 서로 다른 사이클 함수에 있기 때문입니다. 각 dispatch 바로 위에, 그리고 컴포넌트 바로 위에 콘솔을 찍어보면 알 수 있습니다.
0
일단 소중한 답변 감사합니다.
저는 리듀서를 이렇게 만들고
td를 이렇게 구현했습니다.
td에서 클릭이벤트가 실행되면 dispatch를 세 번하면 setState가 세 번이 발생하잖아요?
하지만 여전히 setState를 모아서 한 번에 랜더를 해주는 모습으로 콘솔이 찍혀요.
이전 강의에서도 말씀하셨고 스택오버플로우에서도 그렇듯
setState는 비동기로 요청이 되기 때문에 리액트돔이 모아서 한 번에 처리를 해주기 때문에
이렇게 콘솔이 찍히는 걸로 보여요.
tr 도 콘솔 찍고
테이블도 콘솔 찍고
틱택토도 콘솔 찍어본 결과입니다.
dispatch 연속 세 번 (click_cell, click_game, change_turn)
-> tictactoe render
-> table render
-> tr render
-> td render
로 찍혔습니다.
강의에서 턴이 안 맞았던 이유는
change_turn 요청 당시 X였다면 요청 후 O로 바뀌고
render -> effect 발생하고
effect에서 chage_turn 호출 전 턴인 X로 검사를 해야하는데
호출 후 바뀐 O로 검사해서 그런 거 아닌가 싶습니다...
제가 잘못 알고 있는 부분이 어떤 부분인지랑
서로 다른 사이클 함수는 또 무엇인지 알려주시면 감사하겠습니다.
0
우선 제 강좌랑 코드가 다릅니다. 제 강좌에서는 저렇게 dispatch가 연달아 모아져있지 않았습니다. 저렇게 모아져 있으면 한번에 모아서 렌더링하는 게 맞습니다.
https://github.com/ZeroCho/react-webgame/tree/master/7.%ED%8B%B1%ED%83%9D%ED%86%A0
강좌랑 소스 코드가 다르면 당연히 수행 동작도 다를 수밖에 없습니다.
0
아 넵 맞습니다.
마지막에 완성한 코드는 change_turn 액션을 tictactoe의 useEffect가 하기 때문에
당연히 change_turn -> render -> effect -> 게임 계산 -> dispatch -> render 가 맞죠.
근데 강의 중간에는 td에서 click_cell 액션과 chagne_turn을 td에서 연달아 요청을 했고
승자 계산을 useEffect에서 했었는데 turn이 달라지니까 change_turn을 useEffect로 옮기셨잖아요?
그래서 그 때 강의 중간의 코드일 땐 플로우가 제가 질문드린 흐름대로 가지 않는지에 대한 물음이였습니다.
npm run dev 실행 시 포트가 안뜨는 문제
0
236
2
timeouts.current를 useEffect 의 input값으로 넣었을때
0
97
2
렌더링 테스트 코드 (Hooks)
0
93
1
Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.
0
165
1
해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"
1
207
1
강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ
0
105
1
useMemo와 useCallback 사용 시기
0
218
2
onRightClickTd가 작동을 하지 않습니다.
0
236
1
action.type 불러오는 방식
0
225
2
onClickRedo 질문
0
176
1
const Try = require(./Try) 빨간줄
0
259
1
npx webpack 실행시
0
324
1
지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.
0
241
1
강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?
0
318
1
react devtool이 enable 않됩니다.
0
544
2
React 랜더링이 되지 않습니다.
0
421
2
비동기로 동작하는 setState에 대해서
0
337
1
npm run dev 할 때 에러발생
0
494
2
memo, PureComponenet, shouldComponentUpdate 관련 질문
0
210
1
devMiddleware의 필요성
0
358
1
리액트에서 화살표 함수를 사용해야하는 이유
0
946
2
path.join관련질문
0
287
2
2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러
0
384
1
next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니
1
502
4