inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

리액트 리렌더링 안되게 하는법

318

dong1hyun

작성한 질문수 2

0

문제가 발생한 코드 로직에 대해 설명드리자면 유저가 어떤 상태 선택창을 띄우고 상태를 변경하면 서버로 요청을 보내고 응답이 와서 변경된 데이터로 새로 렌더링 되는 로직입니다. 그런데 여기서 저는 상태 선택창을 닫히지 않게 하고 싶습니다. 그런데 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]);

react react-query useRef

답변 1

0

김민규

선택창이라는게 새 창을 말씀하시는건가요?
+ react-query를 사용중이시고 mutate 요청 후 쿼리 캐시를 만료시키고있다면 리렌더링되는것은 당연합니다

0

dong1hyun

맞습니다. 근데 리렌더링 됐을 때 상태가 초기화 된다고 잘못 생각했네요. 결국 해결했는데 원인은 부모의 키 설정과 관련한 문제였습니다. 키가 변경되면서 리렌더링이 아니라 아예 언마운트 되면서 상태가 초기화 되는 것이였습니다.

2강 퀴즈를 푸려는데 자꾸 수강하지 않은 수업이있는데.. 다들었습니다 ㅜ

0

4

1

서브에이전트 실행중에도 대기해야 할까요?

0

7

1

소스코드 제공여부

0

11

2

궁금했던 질문입니다. 바로 콤마위치 입니다.

0

9

1

62강 실습자료가 잘못되었습니다.

0

13

1

37강에서 ROADMAP.md 파일

0

24

2

.claude, setting~, permission 했을 때 Bash 안 보여요

0

19

2

[미션4] open with Live Server 클릭시 브라우저 안뜸

0

21

3

사용량 한도 도달

0

28

2

Cursor를 실행했을 때 나오는 화면이 달라요

0

23

2

Claude code 대화하는 부분이 위치변경 문의 드립니다.

0

18

2

기본 파일 구조

0

23

2

setting.local.json 파일 안보일떄

0

22

2

Shrimp Task Manager와 Fable5 plan모드 성능비교

0

21

2

git hub 들어가서 setting >> pages 들어갔는데

0

24

2

git config 오류 관련 문의

0

26

2

task master, shrimp task manager 질문있어요

0

17

1

모델 선정 기준

0

30

2

Statusline 결과값 보이지 않는 이유

0

28

2

강의교안, 소스코드 링크 문제

0

23

2

config 들어가도 output-style 없어요

0

15

2

miragejs 강의 건

0

32

2

saveToLibraryAsync

0

31

2

프로젝트 이름

0

39

1