3주차 리뷰

[choisohyun]

한 줄 요약, 주요 내용 정리, 인상 깊은 구절, 종합 평가 등 다양하게 작성

[choisohyun]

• 4장 StoreProvider 외부에서는 어떻게 provider의 값을 사용할 수 있는거지? 에러가 안나는 건가?
• 상태관리 라이브러리들을 상태를 사용하는 관점에 따라 다르게 보면 어떤 것을 쓰면 좋을지 더 도움이 될 것 같다.
• zustand를 적용중인 게 몇 군데 있는데, 아무래도 잘못 쓰고 있는 것 같다. selector가 잘 동작해 리랜더링을 일으키지 않으려면 스토어 사용 시에도 더 작은 단위로 세팅해야 했는데 그걸 놓쳤다.
• selector를 통해 계산식을 사용하고 렌더링 최적화도 할 수 있다는 것이 새로웠다.
• 리액트와 동일하게 불변 방식으로 새롭게 반영하는 점도 좋은 것 같다.

[RAINBOWJYP]

이번에도 완벽하게 이해하지 못했지만 컨텍스트를 언제 사용하면 좋은지에 대해 알려줘서 좋았다.

전역 상태를 위한 컨텍스트는 서로 다른 하위 트리에 서로 다른 값을 제공해야 하는 경우에만 필요하다.

또 내가 활용해왔던 zustand 쓰는 방식이 어떻게 흘러 정착하게 된 사례인지 알게되어서 좋았다.
zustand는 불변 상태 모델을 기반으로 만들어졌다. 상태가 불변이기 때문에 ++state.count처럼 직접 변경하는 것이 불가능하다.
리렌더링을 피하기 위해 useStore((state)=>state.count)처럼 선택자 함수를 집어넣어 count가 변경될때 만 리렌더링되게 한다.
재사용성과 가독성을 위해 store에 함수를 미리 정의하는 것 까지 현재 zustand의 예시와 같은게 어떻게 나온건지 알 수 있었다.

[whewchews]

[생각]
다양한 전역 상태 관리 라이브러리가 존재하는데, 프로젝트에 전역 상태 관리 라이브러리를 도입한다고 했을 때 고려해야할 지점에 대해 분류해볼 수 있었다.

• 라이브러리가 전역 상태를 읽고 작성하는 방법(읽기 상태 - 최적화와 관련 , 쓰기 상태 - 불변 상태 모델인지? 등)
• 전역 상태를 저장하는 위치 : 리액트 컴포넌트 외부(렌더링 사이클과 무관) / 컴포넌트 트리 최상단(모듈 상태 권장) / 리액트 컴포넌트 내부(렌더링 사이클과 유관) /
• 리렌더링을 최적화하는 방법: 선택자를 사용한 수동방법 / Proxy를 사용한 자동방법 / atom을 사용한 수동과 자동 중간 방법
• 라이브러리 번들 크기
• 사용 방법 러닝커브

[요약]

[5장] 리액트 컨텍스트와 구독을 이용한 컴포넌트 상태 공유

• 모듈 상태의 한계
  : 리액트 컴포넌트 외부에 존재하는 전역으로 정의된 싱글턴 => 컴포넌트 트리나 하위 트리마다 다른 상태를 가질 수 없음
• 컨텍스트 사용이 필요한 시점
  : 트리 최상위 하나의 컨텍스트 공급자가 있는 상황은 모듈 상태로 대체 가능(for 불필요한 리렌더링 방지) => 서로 다른 하위 트리에 서로 다른 값을 제공해야 할 경우, 전역 상태를 위한 컨텍스트 사용
• 컨텍스트와 구독 패턴
  : 리액트 컨텍스트 + 구독 패턴 = 하위 트리에 분리된 값 제공 + 리렌더링 피함

[6장] 전역 상태 관리 라이브러리 소개

• 전역 상태 관리 문제 해결하기
  :: 문제1: 전역 상태를 읽는 방법
  전역 상태는 여러 값을 가질 수 있고, 전역 상태를 사용하는 컴포넌트는 전역 상태의 모든 값이 필요하지 않음. 전역 상태가 변경되면 리렌더링이 발생하는데, 라이브러리는 리렌더링 최적화에 대한 해결책을 제공할 필요가 있음.
  :: 문제2: 전역 상태에 값을 넣거나 갱신하는 방법
  전역 상태의 일부는 중첩된 객체일 수 있음.
• 데이터 중심 접근 방식과 컴포넌트 중심 접근 방식 사용하기
  :: 데이터 중심 접근 방식: 모듈 상태가 더 적합. 처리할 데이터가 이미 있고, 데이터와 컴포넌트를 연결함. 모듈 상태는 리액트가 렌더링을 시작하기 전이나 모든 리액트 컴포넌트가 마운트 해제된 후에도 존재할 수 있음.
  => 모듈 상태를 생성, 모듈 상태를 리액트 컴포넌트에 연결하는 API 제공
  :: 컴포넌트 중심 접근 방식: 컴포넌트를 먼저 설계. 데이터 모델이 컴포넌트에 강한 의존성을 가지고 있음. 컴포넌트 중심 접근 방식에서는 컴포넌트 주기 내에서 전역 상태를 유지하는 것이 더 적합함. 의존하는 컴포넌트가 모두 마운트 해제되면 전역 상태도 같이 사라지기 때문.
• 리렌더링 최적화
  : 선택자 함수 사용/속성접근감지/아톰 사용/etc… 방법 등

[7장] 사용 사례 시나리오 1: Zustand

• 리액트의 모듈 상태를 생성하도록 설계된 라이브러리
• 불변 갱신 모델 기반(상태 객체를 수정할 수 없고 항상 새로 만들어야 함)
• 렌더링 최적화: 선택자를 사용해 수동 최적화
• 추천: 작은 번들 크기를 가진 라이브러리가 필요하거나 참조 동등성 및 메모이제이션에 익숙하거나 수동 렌더링 최적화를 선호하는 경우
• 한계: 선택자를 이용한 수동 렌더링 최적화. 객체 참조 동등성 이해 필요. 선탥자 코드를 위해 보일러플레이트 코드를 많이 작성해야함.