[React] useEffect set state가 바로 적용 안 되는 현상

카테고리를 선택하면 그에 맞는 책을 보여주도록 구현을 하고 있었다. 하지만 카테고리를 바꾸면 바로 페이지네이션의 번호가 바뀌는 것이 아닌 다시 한 번 다른 카테고리로 바꿔야 페이지네이션의 번호가 바뀌는 버그가 있었다. 

원래 코드는 아래와 같다.

useEffect(() => {
        if (data) {
            // calculate the total number of pages
            const newTotalPage = [];
            for (let i = 1; i <= Math.ceil(data.totalResults / pagePerLimit); i++) {
                newTotalPage.push(i);
            }
            setTotalPage(newTotalPage);
            // divide per limitPage
            const newSlicePages = [];
            for (let i = 0; i < totalPage.length; i += pageArrayLimit) {
                newSlicePages.push(totalPage.slice(i, i + pageArrayLimit));
            }
            setSlicePages(newSlicePages);
            console.log("totalResults: ", data.totalResults)
            console.log("totalPage: ", totalPage)
            console.log("slicePgae: ", slicePages)
        }
    }, [data, categories]);

아래의 부분에서 문제가 있었던 것 같다. 

for (let i = 0; i < totalPage.length; i += pageArrayLimit) {
    newSlicePages.push(totalPage.slice(i, i + pageArrayLimit));
}

그 전에도 종종 겪었던 문제이다. set을 하고 그 뒤에 바로 console log를 찍으면 바뀌기 전의 값이 나왔다. useEffect는 비동기적으로 수행되기에 상태를 업데이트하고 나서 바로 그 state를 사용하면 값이 보장되지 않는다. 때문에 바로 위에서 계산했던 값을 넣어주기로 했다.

for (let i = 0; i < totalPage.length; i += pageArrayLimit) {
    newSlicePages.push(totalPage.slice(i, i + pageArrayLimit));
}

위의 부분을 변경했더니 잘 작동된다.