리액트 리렌더링 안되게 하는법
314
2 asked
문제가 발생한 코드 로직에 대해 설명드리자면 유저가 어떤 상태 선택창을 띄우고 상태를 변경하면 서버로 요청을 보내고 응답이 와서 변경된 데이터로 새로 렌더링 되는 로직입니다. 그런데 여기서 저는 상태 선택창을 닫히지 않게 하고 싶습니다. 그런데 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]);
Answer 1
0
선택창이라는게 새 창을 말씀하시는건가요?
+ react-query를 사용중이시고 mutate 요청 후 쿼리 캐시를 만료시키고있다면 리렌더링되는것은 당연합니다
0
맞습니다. 근데 리렌더링 됐을 때 상태가 초기화 된다고 잘못 생각했네요. 결국 해결했는데 원인은 부모의 키 설정과 관련한 문제였습니다. 키가 변경되면서 리렌더링이 아니라 아예 언마운트 되면서 상태가 초기화 되는 것이였습니다.
사진 복사 붙여넣기 관련 질문
0
7
1
eslint.config.js 설정 질문입니다.
0
6
1
화면구성
0
18
2
<div id="banner">배너 이미지</div> 관련 질문
0
12
1
fatal: repository 'https://github.com/gymcoding/my-marketplace.git/' not found
0
19
2
live server, korean 을 검색해도 아무것도 나오지 않음
0
19
1
커서질문
0
28
1
강의자료
0
22
1
SUPABASE에서 AOI 선택여부
0
24
2
클로드 코드 터미널 사용시 git, git 허브 활용 법
0
24
1
mcp.json파일 생성 X
0
24
2
강의 내용이 정신이없네요 ;;
0
50
2
제 컴퓨터에서는 Claude's plan이 아래와 같이 나오는데 괜찮은 건가요?
0
34
2
강의에서 사용하는 prompt
0
30
2
window 11 환경 + git bash 터미널 statusline 반영이 안됩니다 ㅠ
0
33
2
강사님 질문있습니다.
0
22
1
프로젝트를 커밋할때 알려주세요
0
30
1
작업결과물이 수업내용의 화면이 좀 다르네요
0
40
2
강의 도중 에러가 발생합니다.
0
37
2
사진과 같이 영상에 한글이 실시간으로 영어로 번역되어 보입니다
0
41
2
커밋버튼 비활성화
0
34
2
Cursor 질문
0
27
2
웹사이트 구축 질문
0
41
1
플러그인, git repo 설치 및 삭제
0
33
1

