강의

멘토링

커뮤니티

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

춘식이님의 프로필 이미지
춘식이

작성한 질문수

한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편

(3.3) Zustand 기본 사용법 2

Zustand 사용 중 컴포넌트 리렌더링 관련 질문

작성

·

35

·

수정됨

0

  • 관련 챕터: 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

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다,.

네 전반적으로 맞게 이해하셨습니다. 여기서 한가지 중요한 포인트는 Store 전부를 가져다 쓸 경우 Store중 하나의 값이라도 변경되면 리렌더링 되지만, Store로부터 하나의 값만 불러다 쓰는 경우 해당 값이 변경될 때에만 리렌더링이 발생한다는 점 입니다!

이를 이용해 불필요한 값은 불러다 쓰지 않게 함으로써 불필요한 리렌더링을 방지할 수 있습니다

춘식이님의 프로필 이미지
춘식이

작성한 질문수

질문하기