-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
render -> effect 흐름 이거 아닌가요?
21.07.29 01:17 작성 조회수 158
0
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
조현영
지식공유자2021.07.29
아뇨. dispatch(click_cell)과 dispatch(change_turn)은 모아서 처리되지 않습니다. 서로 다른 사이클 함수에 있기 때문입니다. 각 dispatch 바로 위에, 그리고 컴포넌트 바로 위에 콘솔을 찍어보면 알 수 있습니다.
한수빈
질문자2021.07.29
일단 소중한 답변 감사합니다.
저는 리듀서를 이렇게 만들고
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로 검사해서 그런 거 아닌가 싶습니다...
제가 잘못 알고 있는 부분이 어떤 부분인지랑
서로 다른 사이클 함수는 또 무엇인지 알려주시면 감사하겠습니다.
조현영
지식공유자2021.07.30
우선 제 강좌랑 코드가 다릅니다. 제 강좌에서는 저렇게 dispatch가 연달아 모아져있지 않았습니다. 저렇게 모아져 있으면 한번에 모아서 렌더링하는 게 맞습니다.
https://github.com/ZeroCho/react-webgame/tree/master/7.%ED%8B%B1%ED%83%9D%ED%86%A0
강좌랑 소스 코드가 다르면 당연히 수행 동작도 다를 수밖에 없습니다.
한수빈
질문자2021.07.30
아 넵 맞습니다.
마지막에 완성한 코드는 change_turn 액션을 tictactoe의 useEffect가 하기 때문에
당연히 change_turn -> render -> effect -> 게임 계산 -> dispatch -> render 가 맞죠.
근데 강의 중간에는 td에서 click_cell 액션과 chagne_turn을 td에서 연달아 요청을 했고
승자 계산을 useEffect에서 했었는데 turn이 달라지니까 change_turn을 useEffect로 옮기셨잖아요?
그래서 그 때 강의 중간의 코드일 땐 플로우가 제가 질문드린 흐름대로 가지 않는지에 대한 물음이였습니다.
답변 1