setState가 되지 않습니다.

Question

사수가 없어 랜선 사수님들의 조언을 구합니다.
저는 지금 페이지네이션을 구현하고 있는데, setState가 되지 않는 이슈가 있습니다. 리액트 18버전과 타입스크립트를
사용하고 있고, 
현재 구현중인 tsx파일 코드의 플로우는 이러합니다.

1. 페이지에 대한 타입 정의
2. 파라미터로 몇개의 옵션을 받음
3. 기본 옵션들을 options에 객체로 담아 useState 선언
4. useEffect(()=>{},[]) 안에서 Object.assign으로 options에 parameter 내에 있는 몇개의 옵션을 덮어씌워줌
5. (아직 useEffect) options에 있는 값으로 페이지네이션에 보여질  첫 페이지 넘버와 마지막 페이지넘버를 구한 후, 기존 options 객체 안의 minPage와 maxPage 값을 변경

5번에서 minPage와 maxPage의 값이 변하지 않습니다.
사용한 코드는 
1. setOptions({...options, minPage: 첫페이지넘버, maxPage: 마지막페이지넘버})
2. setOptions(options=>{...options, minPage: 첫페이지넘버, maxPage: 마지막페이지넘버})
입니다.
하지만 두 코드 모두 options 객체 안의 minPage, maxPage의 값이 반영되지 않습니다.
5번 기능이 구현된 함수를 useEffect(()=>{},[options])에 넣어보았는데, 반영은 되는 듯 하나 무한렌더링의 늪에 빠졌습니다...

도와주십시오ㅠㅠ

성원 · Answer

useEffect 디펜던시로 options를 넣지않고
useState((options) => …) 이렇게 함수 값을 사용해보시겠어요?

괜찮으시다면 gist로 전체 코드 첨부해주시면 답변에 더 도움될 것 같습니다💪

강병진 · Answer

useEffect의 디펜던시로 options state의 값을 넣었으니 options가 변경될 때마다 useEffect hook이 작동합니다. 
그런데 여기서 해당 hook 내에서 options state를 변경하는 setState를 실시하기 때문에 무한루프가 발생합니다.

따라서 effct hook의 디펜던시에서 options를 제거하시고 minPage, maxPage 가 제대로 계산 되는지 확인이 필요할 것 같습니다.

엄홍재 · Answer

제 생각에는 1번이나 2번이나 둘다 변할것 같은데 질문자 분께서 값이 변하는 타이밍을 어디서 체크하셨는지가 중요한 것 같아요
useEffect 안에서 setState를 호출하고 바로 다음줄에 console.log(options)를 출력하면 이건 변하지 않을겁니다. 이유는 setState는 비동기 함수여서 line by line으로 적용되지 않기 때문입니다. 
코드가 없어서 어렵네요 혹시 가능하시다면 코드첨부 해주시면 좋을것같아요!

익명 · Answer

자답합니다..
4번에서 setOptions를 하면서 파라미터값을 덮어씌우고
5번에서 또 setOptions 하면서 maxPage값과 minPage를 업데이트하려다보니 한번의 렌더링에 setState를 두번 사용하여 생긴 이슈였습니다..
한 객체 변수를 만들어 값을 변경해준 후 useEffect에서 한번에 setState하는 방식으로 수정하여 해결했습니다!

소스를 복붙하기 어려운 상황이라 첨부하지 못했음에도 정성스레 답변주셔서 감사합니다!