state변경함수 질문드립니다

[백우혁]

선생님 안녕하세요

카운트가 2보다 작을때는 자동으로 카운트+1을 하고

카운트가 2보다 커지면 0으로 초기화 하고 다시 2보다 작을때까지 카운트+1을 하는 코드를 작성하고싶데

의도대로 되지않네요..(카운트가 0, 1, 2, 0, 1, ,2 ...이런식으로 나왔으면 합니다.)

카운트를 state가 아닌 일반 변수로 저장하면 되길래 async문제인가 싶었는데

아무리봐도 async문제는 아닌것같습니다

if문 else문 실행되고 setTimeout이 실행되는게 맞으니까요..아니면 제가 잘 모르는건가 싶습니다

제가 의도한바와는 다르게 카운트가 0, 1까지만 나오고 더 올라가질 않네요

구글에 state변경함수 검색해서 이것저것 찾아봤는데, 도저히 모르겠네요..

뭐가 문제인지, 해결방법이 뭔지 궁금합니다..

[codingapple]

카운트가 바뀔 때 console.log 하라고 한게 실행이 안되서 그런것일 수도 있습니다 

아니면 주기적으로 계속 코드 실행해달라고 하고싶으면 setInterval도 있습니다 

 

[백우혁]

저기 있는 useEffect 코드는 카운트의 변동사항이 있을때만 console.log를 호출하는 코드라서 문제랑 상관이 없고

오히려 카운트값이 변화하는걸 정확하게 볼수있지 않나요?

그리고  setinterval()로 해봐도 제가 원하는 결과가 안나와요..

 

오늘까지 계속 이렇게 저렇게 코드를 고쳐보고 있는데 안되니까 너무 답답해요

그렇게 어려운 문제도 아닌것같은데 안되니까 미치겠네요

[백우혁]

조건문 위치를 바꿔서도 작성해봤는데요

달라지는게 없네요

제 의도대로라면

@ 컴포넌트 등장 => console.log 카운트 0 출력

onclick 으로 자동카운트()함수 실행

@ 카운트(현재0)는 1보다 크지않으니 카운트++하고 console.log 카운트 1 출력, settimeout함수 다시 실행

@카운트(현재1)는 1보다 크지않으니 카운트++하고 console.log 카운트 2 출력, settimeout함수 다시 실행

@카운트(현재2)는 1보다 크니까 카운트변경(0)을 하고 console.log 카운트 0 출력, settimeout함수 다시 실행

@ 카운트(현재0)는 1보다 크지않으니 카운트++하고 console.log 카운트 1 출력, settimeout함수 다시 실행

@ 이과정을 1200밀리초 마다 반복

이런식으로 동작해야하는데 왜 카운트가 2까지 올라가지도 않고 중간에 멈추는 걸까요?

 

[codingapple]

그것은 setTimeout과 setInterval이 리액트에서 이상하게 동작해서 그렇습니다 

타이머 안에 있는 코드는 당연히 1초마다 실행이 되긴 하는데

계속 실행되는 타이머 안에선 바깥 state가 바뀌어도 바뀐 state를 인식하지 못하는 일종의 버그같은 버그가 있습니다

그래서 타이머 안에서 state출력해보면 안바뀌어있고 그런 경우가 있습니다

state바뀌는 시간과 재렌더링 되는 시간이 좀 안맞아서 그런 것 같기도 한데

그래서 재렌더링될 때 마다 기존 타이머 제거하고 새로운 타이머를 부착하는 식으로 코드짜면 새로운 state를 가져다쓸 수 있으니 해결됩니다 

[백우혁]

결국에 해결했습니다. 선생님이 말씀하신 재렌더링때마다 타이머회수하고 부착하는것에 대해 검색해보다가

useref를 알게되었습니다. 찾아보니 useref라는 hook은 재렌더링되어도 변수의 저장값이 소실되지않고 유지되는 함수라고

하더라구요.  그래서 타이머랑 카운트state를 담은 함수를 useref에 담아 사용하니 해결되었습니다.

근데 이게 왜 기존타이머를 제거하고 새로운 타이머를 부착한다는건지는 사실 아직도 이해가 잘안되네요.

useref가 계속 기존타이머의 값을 잃지않고 유지하는 함수 아닌가요? 문제를 해결하긴 했지만 아직도 조금 와닿지가 않네요.

좀더 응용하여 app컴포넌트가 등장하면 자동으로 카운트를 올리게 하고

수동으로 카운트를 올리는 버튼도 만들어보았습니다

답변해 주셔서 감사드립니다. 좋은 하루되세용

[글쓴이]

글