3주차 질답

[choisohyun]

목차명	질문	답변
3	6 @blan19	1 @choisohyun
	4 @RAINBOWJYP	6 @blan19
	2 @whewchews	5 @jisunchung
	3 @im-na0	2 @whewchews
	1 @choisohyun	4 @RAINBOWJYP
	5 @jisunchung	3 @im-na0

[whewchews]

2번 문제

챕터7에 나온 Zustand 라이브러리 내부 구현에 관련된 문제입니다.

아래와 같이 store를 만들고

const store = create(()=> ({
	order: 3,
	name: 'a',
}))

다음과 같이 불변으로 상태를 변경한다고 했을때, store.setState()는 새 상태와 이전 상태를 병합합니다.

store.setState({
  order: 2,
})

1. 이는 Zustand의 store.setState()가 내부적으로 JavaScript 객체의 어떤 메서드를 활용해서 만들어진 것일까요?
   그 메서드의 특징과 사용법에 대해 설명해주세요.

2. userStore에서 name.first 값을 "sun"으로 변경하고 싶습니다. userStore.setState()를 사용해 해당 값을 변경하는 코드를 작성해주세요.

const userStore = create(() => ({ 
   order: 1,
   name: {first: "son", last: "kim" }
})

[jisunchung]

1. Object.assign({}, oldState, newState) 메서드를 활용해서 만들어진 것 입니다.
   Object.assign 메서드는 객체를 복사하거나 여러개의 객체를 하나의 객체로 병합할 때 사용됩니다.
   oldState와 newState속성을 병합해서 새 객체를 반환합니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 3, c: 4 };
const merged = Object.assign({}, obj1, obj2);

위 코드는 두개의 객체를 병합하는 코드입니다. obj2의 속성이 obj1의 속성을 덮어씌워서 a 값이 3으로 변경됩니다
따라서 merged는 { a: 3, b: 2, c: 4 }가 됩니다.

userStore.setState((prev) => ({
  name : {
    ...prev.name,
    first: "sun"
  }
}))

[jisunchung]

5번 문제

1. 전역 상태를 위해 리액트 컨텍스트를 이용하는 방법과 구독을 사용하는 방법이 있는데 이 두개의 이점에 대해서 말해주세요.

2. zustand의 create함수를 이용하여 useStore훅을 만들고 사용하는 예제입니다.
   아래 코드는 화면과 관련 없는 text값이 변경되더라도 리렌더링이 발생합니다. 리렌더링을 피하기 위해서 선택자 함수를 사용해서 다시 작성해주세요

import { useStore } from './store.ts'

const Component = () => {
	const { count, text } = useSotre()
	return <div>count : { count }</div>
}

[im-na0]

A1.
컨텍스트는 하위 트리에서 전역 상태를 제공할 수 있고 컨텍스트 공급자를 중첩하는 것이 가능합니다. 리액트 컴포넌트 생명주기 내에서 전역 상태를 제어할 수 있다.
반면 구독을 사용하면 단일 컨텍스트로는 불가능한 리렌더링 문제를 피할 수 있다는 이점이 있습니다. (선택자 함수 이용)

A2.

const Component = () ⇒ {
   const count = useStore((state) => state.count);
   return (
       <div>count : { count }</div>
   );
}

[choisohyun]

1번 문제

Q. 리렌더링 최적화의 핵심은 컴포넌트에서 state의 어느 부분이 사용될지 지정하는 것입니다. state의 일부분을 지정하는 몇 가지 접근 방식 중 선택자 함수 사용(useSelector)과 속성 접근 감지(useTrackedState)는 구현과 사용 방식에서 어떤 차이가 있을까요?

[RAINBOWJYP]

useSelector는 선택자 함수를 사용하여 상태의 일부를 반환하여 사용합니다.

const Component = () => {
 const isSmall = useSelector((state)=>state.a<100)
return <>{isSmall ? 'small' : 'big'}</ >}

a값이 바뀌더라도 a<100이 아닌경우 isSmall은 변경되지 않습니다. isSmall이 변경될때만 리덴더링 됩니다.

useTrackedState는 속성 접근을 감지하고 감지한 정보를 렌더링 최적화에 사용할 수 있는 상태 사용 추적이라는 것이 있고 이것을 useTrackedState 훅이라고 하면

const Component = () => {
const isSmall = useTrackedState().a < 100
return <>{isSmall ? 'small' : 'big'}</ >}
}

a가 변경되면 렌더링이 됩니다. useSelector 방식이 최적화에 더 좋은 것 같습니다.

[im-na0]

3번 문제

Q1.
선택자 함수에서 객체를 반환하면 리렌더링이 발생하는 이유는 무엇인거요? 선택자 함수의 한계는 무엇이며, 이를 해결하기 위한 방법은 무엇일까요?

Q2.
아래와 같이 Zustand의 store.setState()를 사용하여 상태를 업데이트하면 새로운 상태와 기존 상태가 병합됩니다.

const store = create(() => ({
 order: 3,
 name: 'a',
}));

store.setState({
 order: 2,
});

Zustand의 store.setState()가 내부적으로 JavaScript 객체의 어떤 메서드를 활용하여 만들어진 것일까요?
그 메서드의 특징과 사용법에 대해 설명해주세요.

[whewchews]

A1.
리액트에서는 상태를 비교할 때 기본적으로 Object.is()(얕은 비교)를 사용합니다. 선택자 함수가 불변상태를 유지하기 위해 새 객체를 생성해 반환하면 리액트는 새로운 객체를 인식하고 해당 컴포넌트를 리렌더링 시킵니다.

선택자 함수는, 객체 반환시 불필요한 리렌더링을 발생시키고, 메모이제이션을 신경써야 할 수도 있다는 한계가 있습니다.
이를 해결하기 위해, 객체 대신 개별 값을 반환하도록 최적화해서 사용하거나, useMemo를 사용해 불필요한 객체 재생성을 방지할 수 있습니다.

A2.
Zustand의 store.setState()는 상태의 얕은 병합을 위해 JS의 Object.assign()이라는 함수를 사용합니다.
Object.assign(target, source)는 target 객체를 source 객체의 값으로 덮어쓰는 방식으로 사용합니다.
즉, Object.assign()은 기존 상태 값을 유지하면서 새로운 값을 덮어쓸 때 용이합니다.

단, Object.assign()은 1-depth(1단계) 깊이까지만 병합하고 중첩된 객체는 새로운 참조를 만들지 않기 때문에,
중첩된 객체를 복사해야 할 경우 유의해야 합니다.

[im-na0]

👍

[blan19]

6번 문제

Q1.
모듈 상태는 왜 데이터 중심 접근 방식에 적합할까요?

// selector.ts

const selector = (state: State) => state.count * 10

// main.ts
import { selector } from './selector'

const Counter = () => {
  const count = useStore(selector);
  
  // ...
}

Q2.
zustand의 상태 모델은 리액트의 어떠한 원칙을 기반으로 설계되었나요?

[choisohyun]

Q1. 데이터 중심 접근 방식의 경우 모듈 상태가 리액트 외부의 자바스크립트 메모리에 있기 때문에 모듈 상태를 사용하는 편이 더 적합합니다. 모듈 상태는 리액트가 렌더링 시작 전이나 마운트 해제된 후에도 존재할 수 있습니다.
데이터 중심 접근 방식을 사용하는 전역 상태 라이브러리는 모듈 상태를 생성하고 모듈 상태를 리액트 컴포넌트에 연결하는 API를 제공합니다. 모듈 상태는 보통 상태 변수에 접근하고 갱신하는 메서드를 가진 store 객체로 감쌉니다.

Q2. 객체 불변성 규칙과 일치합니다. 리액트와 zustand 모두 불변성에 기반한 객체 참조 동등성으로 리렌더링을 최적화합니다.
참조값으로 값을 변경할 수 없어 리렌더링이 많아지는 것을 막을 수 있습니다.
또한 라이브러리의 단순성과 번들 크기가 작다는 이점이 있습니다.

[RAINBOWJYP]

Q. zustand를 이용하여 컴포넌트를 만들었습니다.
스토어 상세 내용은 p132에 있습니다. (다 못적었어요..)

const Total = () => {
 const count1 = useStore(selectCount1);
 const count2 = useStore(selectCount2);
 return (
  <div> total : {count1 + count2} </div>
)
}

count1과 count2를 더하는 컴포넌트입니다.
최적화 측면에서 문제가 될 수 있을까요?

[blan19]

A.
컴포넌트에서는 두 카운트 값에 대한 파생 상태를 사용하고 있습니다.
이 경우에는 count1이 +1, count2 -1 이 된다면 결국엔 같은 값이지만 각 상태가 변하는 것이므로 리렌더링이 발생합니다.

이를 최적화 하기 위해서는 셀렉터 함수에서 파생 상태를 관리해 컴포넌트는 셀렉터로 가져온 상태가 변하면 리렌더링하도록 최적화할 수 있습니다.