리액트 리렌더링 안되게 하는법
318
2 câu hỏi đã được viết
문제가 발생한 코드 로직에 대해 설명드리자면 유저가 어떤 상태 선택창을 띄우고 상태를 변경하면 서버로 요청을 보내고 응답이 와서 변경된 데이터로 새로 렌더링 되는 로직입니다. 그런데 여기서 저는 상태 선택창을 닫히지 않게 하고 싶습니다. 그런데 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]);
Câu trả lời 1
0
선택창이라는게 새 창을 말씀하시는건가요?
+ react-query를 사용중이시고 mutate 요청 후 쿼리 캐시를 만료시키고있다면 리렌더링되는것은 당연합니다
0
맞습니다. 근데 리렌더링 됐을 때 상태가 초기화 된다고 잘못 생각했네요. 결국 해결했는데 원인은 부모의 키 설정과 관련한 문제였습니다. 키가 변경되면서 리렌더링이 아니라 아예 언마운트 되면서 상태가 초기화 되는 것이였습니다.
챌린지 시작일 문의
0
5
0
줄바꿈 시 \ 필수인가요?
0
9
2
2605 이후 최신 클로드코드 강의 추가 부탁드립니다.
0
8
2
커리큘럼 문서 제공받을 수 있을까요?
0
14
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
9
1
mission 09-01 을 수행할 수 없어요
0
16
1
outputStyle 설정하는데 어디서 문제일까요?
0
17
3
test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데
0
11
2
검은화면
0
20
3
강의교환링크안열려요.....
0
22
2
영상재생에러 [확인부탁드려요!!!]
0
19
2
클로드 채팅에서 코드로 넘어가기
0
31
2
Context API vs Zustand 그리고 Auth
0
30
2
110강부터 따라가기가 힘듭니다...
0
48
2
커서에서 붙여넣기
0
35
2
깃허브 사용시 폴더경로 관련질문
0
23
2
[reducer] 기능별 폴더 구조 설계/ 파일 분리로 유지 보수 가능한 아키텍처 구축
0
21
2
순수 함수 / 순수 컴포넌트
0
21
1
스니펫이 이상해요
0
31
2
/output-style 명령어는 폐기 되었다고 나오네요.
0
39
2
프롬프트 작성시 html, css, javascript
0
35
2
Editor Component의 최적화 불가능 이슈
0
37
2
Cursor 창이 수업 내용과 달라요.
0
37
3
Supabase MCP 관련 질문입니다
0
40
2

