Zustand 사용 중 컴포넌트 리렌더링 관련 질문
관련 챕터: Zustand 기본 사용법 2
질문 관련 부분: 4:34 ~ 6:20
질문 내용: 역할에 따라 컴포넌트를 분리하는 과정에서,
count값 변경 시Controller컴포넌트까지 리렌더링되는 이유에 대해 설명해주셨는데요.
제가 맞게 이해했는지 헷갈려서 질문 드립니다.count값이 바뀔 때마다Viewer,Controller컴포넌트가 동시에 리렌더링된다. 버튼 태그를 포함하는Controller컴포넌트까지 리렌더링되는 이유는1. Zustand는
store안의state가 바뀌면store를 가져다 쓴 모든 컴포넌트가 다시 그state값을 반영하도록 리렌더링된다.2.
Controller는 구조분해 할당으로increase,decrease만 쓴다고 해도, 훅이 반환한 객체 안에count도 포함돼 있으므로count가 바뀌면Controller도 리렌더링된다.제가 맞게 이해한 걸까요?
답변 1
0
안녕하세요 이정환입니다,.
네 전반적으로 맞게 이해하셨습니다. 여기서 한가지 중요한 포인트는 Store 전부를 가져다 쓸 경우 Store중 하나의 값이라도 변경되면 리렌더링 되지만, Store로부터 하나의 값만 불러다 쓰는 경우 해당 값이 변경될 때에만 리렌더링이 발생한다는 점 입니다!
이를 이용해 불필요한 값은 불러다 쓰지 않게 함으로써 불필요한 리렌더링을 방지할 수 있습니다
Zustand의 Store 타입은 어떤 기준으로 작성하는 건가요?
0
45
2
포스트 작성 중 이탈 방지 기능 (취소 버튼 클릭 시 오류)
0
73
2
"포스트 생성에 실패했습니다" 실패 문구와 함께 에러가 발생합니다ㅠㅠ
0
74
2
강의자료는 어떻게 제작하시나요?
0
87
2
비밀번호 재설정 1회용 이메일 링크
0
87
1
강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.
2
94
1
회원가입 구현 (구현 후 최종 화면 출력 X)
0
113
2
(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의
0
83
1
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
89
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
99
2
6.8 zustand 세션 질문입니다.
0
152
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
125
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
1
730
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
116
2
4.11 바로 투두 삭제가 안됨 질문
0
143
3
매개변수 updatedTodo 관련 질문
0
107
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
127
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
119
2
4.6 id를 string으로 변경시 오류
0
115
2
리액트 타입스크립트 관련 질문있습니다.
0
100
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
152
2
ui 파일 질문드립니다.
0
118
1
tanstack query devtools에서 질문있습니다!
0
104
2
댓글 삭제 시 isPending 질문
0
90
2