const timer = setInterval(() => {
if (상태) 로직();
else clearInterval(timer);
}, 1000);
이런식으로 외부상태로 분기처리해서
콜백 안에서 인터벌 종료해야함.
근데 저 상태가 리액트 useState인 경우에는
저 콜백이 실행되는 시점에서 받은 상태가 고정이 되더라.
저 로직()도 리액트 바깥의 클래스에서 받아오는거라
그 클래스안에 따로 멤버를 만들어 상태를 관리하니
셋인터벌 콜백 안에서도 상태변경도 제대로 되고 분기처리도 잘됨.
궁금한건 리액트훅스와 외부클래스 상태의
어떤 차이때문에 이런 문제가 생기는거야??
저 상태가 랜더링 의존성도 가지고있어서
상태 하나를 리액트훅스, 클래스 멤버로 이중으로 관리하고있어서
오버헤드는 모르겠지만 코드는 매우 지저분해짐
- dc official App
아 참고로 저거 실행되는건 버튼 온클릭 콜백안에서임. 이벤트 동작은 항상 헷갈리네 - dc App
해당 댓글은 삭제되었습니다.
여기서 someState는 이벤트아님?? - dc App
타이머는 함수가 아니라 셋인터벌 아이디잖아 - dc App
그렇게하면 아이디가 없어서 클리어인터벌을 못하잖아.function 래퍼함수(상태){블라블라const timer = setInterval(() => { if (상태) 로직(); else clearInterval(timer); }, 1000);}이렇게 짰음 그런데 저 상태에다가useState 훅으로 만들어서 리액트에 종속적인 상태를 넣으면 상태 업데이트가 안되고외부클래스의 상태를 넣을때는 상태 업데이트가 잘 됨.
전혀상관없는글이잖아
timer 함수 내부 if문에서 조건으로 사용하는 상태가 setInterval함수의 콜백함수 구현부에서 동일한지를 묻는거임?
만약 질문이 이거라면 모든 함수의 라이프사이클 종료 이후에 상태변경이 반영되니 함수의 마지막 라인까지 돌려야 반영이 되지
아 이거보고 생각해보니, 외부 클래스에서 받아온 상태는 게터메소드로 받아오는거라 라이프사이클 종료 이전에도 변경된 상태가 반영이 되나보네. 리액트 훅스 상태도 따로 게터함수를 만들어서 받아오면 될것같다. - dc App
근데 함수형 컴포넌트 안씀? 게터메소드가 뭐야
외부 클래스에서는 props 전달이나 리덕스 쓰잖아 리덕스의 게터방식 말하는건가
유즈스테이트 상태가 반영이 안되길래 외부클래스에다 따로 상태를 만들고 그거 게터로 받아와서 분기처리했음. 이제 안그래도될것같다. 상태는 유즈스테이트로만 관리하고, 따로 상태 뱉어주는 함수를 만들어야겠음 - dc App
if(외부클래스인스턴스.상태게터()) 이런식으로 - dc App
이건 전체적인 코드를 봐야알꺼같은데 혹시 useState 상태값 변경할때 setState함수로 변경해준거 맞지? 리액트는 원본값 state값 직접 변경안하고 setState로 변경해야 값변경을 인식하게되있잖아
그리고 리액트에서 클래스를 쓸일이 있음? 함수형 컴포넌트 쓰는거 맞지?
당연히 그렇게했지. 근데 라이프사이클 안에서 setState로 변경한 값이 라이프사이클이 끝나기전에는 반영이 안되는게 문제였음. - dc App
컴포넌트는 함수형인데, 비지니스로직을 클래스로 관리하고있음. 이렇게 많이하는데 - dc App
그래서 지금 생각중인게, setstate로 state업데이트하고, 따로 state를 리턴하는 함수를 하나 더 파서, 라이프사이클 안에서 그 함수로 불러온 state로 분기처리를 하면 되지않을까 싶은데, 오늘 집에가서 해봐야겠다. - dc App
구현하려는걸 함수분리말고 커스텀훅으로 파서 써봐 이게 훨씬 나을수도있음
재사용할일 없는 함수라 굳이 커스텀훅까지는 오버인것같아. 그냥 상태반영이 왜 안되는지가 궁금했음. 돔으로 움직이는 애니메이션을 처음짜보는거라. - dc App