인프런 커뮤니티 질문&답변

문제가 발생한 코드 로직에 대해 설명드리자면 유저가 어떤 상태 선택창을 띄우고 상태를 변경하면 서버로 요청을 보내고 응답이 와서 변경된 데이터로 새로 렌더링 되는 로직입니다. 그런데 여기서 저는 상태 선택창을 닫히지 않게 하고 싶습니다. 그런데 useState를 사용하면 리렌더링 됐을 때 당연히 상태가 초기화 돼서 선택창이 사라질 것이기 때문에 useRef를 사용했습니다.

아래가 그 코드인데 useRef로 했음에도 리렌더링 되고 초기 상태인 false로 바뀌어버립니다. 그래서 상태창을 유지하지 못하고 있습니다. 해결법 좀 아시는 고수님들 도움 좀 주셨으면 좋겠습니다 ㅠ

const maintainStatus = useRef(false);

const changeStatus = (status: LocationStatusType) => {
        mutate({
            locationStatus: status
        }, {
            onSuccess: async (res) => { // 성공시
                await queryClient.invalidateQueries({ queryKey: homelessListQueryKey }); // 쿼리 최신화
                maintainStatus.current = true;
                console.log("maintainStatus.current:", maintainStatus.current) //true 출력
            }
        })
    }
    useEffect(() => {
        console.log("Updated maintainStatus.current:", maintainStatus.current); // false 출력
    }, [maintainStatus.current]);