2주차 질답

[choisohyun]

목차명	질문	답변
2주차	3 @hamo-o	6 @blan19
2주차	6 @blan19	3 @hamo-o
2주차	2 @whewchews	4 @JoyJaewon
2주차	1 @choisohyun	5 @RAINBOWJYP
2주차	5 @RAINBOWJYP	2 @whewchews
2주차	4 @JoyJaewon	1 @choisohyun

[JoyJaewon]

4번 질문

Q1. 리액트 컨텍스트를 사용할 때 장단점은 무엇인가요?

Q2. 아래의 useStore 훅에서 selector를 사용한 이점은 무엇인가요?

const useStoreSelector = (store, selector) => {
  const [state, setState] = useState(selector(store.getState()));

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setState(selector(store.getState()));
    });
    return unsubscribe;
  }, [store, selector]);

  return state;
};

[choisohyun]

Q1.
장점: 여러 Provider를 사용해 격리된 상태를 제공할 수 있습니다. 따라서 props를 사용하지 않아도 자식에게 값을 전달할 수 있습니다.
단점: 전역 상태를 위해 설계된 것이 아니어서 객체를 사용하면 실제 사용하는 값이 변경된 것이 아니어도 추가적인 리렌더링이 발생할 수 있습니다.

Q2.
selector를 사용하면서 컴포넌트가 필요로 하는 상태의 일부분만 반환하게 됩니다. 불필요한 리렌더링을 막을 수 있습니다.
selector에 (state) => state.count 와 같이 사용하는 값만 전달할 수 있습니다.

[hamo-o]

3번 질문

reduceRight 메서드에 대해서 설명하고, 아래 컴포넌트를 reduceRight를 활용해서 작성해주세요.

const App = () => (
  <CalendarProvider initialValue={10}>
    <TimeProvider1 initialValue={20}>
      <TimeProvider2 initialValue={30}>
        <SomeComponent />
      </TimeProvider2>
    </TimeProvider1>
  </CalendarProvider>
);

[choisohyun]

reduceRight은 배열의 끝부터 시작하여 누적이 되는 메서드입니다.
providers에 컴포넌트를 부모 -> 자식 순서로 작성하면 reduceRight을 사용해 작성한 순서대로 Provider로 감싸진 엘리먼트를 만들 수 있습니다.

const App = () => {
  const providers = [
    [CalendarProvider, {initialValue: 10}],
    [TimeProvider1, {initialValue: 20}],
    [TimeProvider2, {initialValue: 30}],
  ]
  return providers.reduceRight((children, [Component, props]) => createElement(Component, props, children), <Parent />)
}

[choisohyun]

1번 질문

Q. 리액트 Context api를 많이 사용해서 중첩이 많은 구조가 발생할 수 있습니다. 이 경우 어떤 방식으로 리팩토링할 수 있을까요?

const App = () => (
  <Count1Provider initialValue={10}>
    <Count2Provider initialValue={20}>
      <Count3Provider initialValue={30}>
        <Count4Provider initialValue={40}>
          <Count5Provider initialValue={50}>
            <Parent />
          </Count5Provider>
        </Count4Provider>
      </Count3Provider>
    </Count2Provider>
  </Count1Provider>
);

Q. 리액트에서 리렌더링을 일으키는 훅은 무엇인가요? 또 리렌더링을 일으키는 훅을 사용하지 않으면 어떤 문제가 발생할까요?

[RAINBOWJYP]

A1. reduceRight() 메서드를 이용하여 코딩 스타일을 개선할 수 있습니다.

const App = () => {
 const providers = [
  [Count1Provider, {initialValue:10}],
  [Count2Provider, {initialValue:20}],
  [Count3Provider, {initialValue:30}],
  [Count4Provider, {initialValue:40}],
  [Count5Provider, {initialValue:50}],
];
 return providers.reduceRight((children, [ Component, props ]) => (
   createElement(Component, props, children
   ), <Parent />);
}

A2. useState, useContext, useReducer 등이 있습니다. react에서 훅을 사용하지 않으면 컴포넌트 상태가 갱신되지 않습니다. 상태가 업데이트 되지 않아 최신 UI가 노출되지 않습니다.

[whewchews]

2번 질문

불필요한 리렌더링을 피하면서 컴포넌트가 필요로 하는 상태의 일부분만 사용하기 위해 useStoreSelector 훅을 만들었습니다.
아래 useStoreSelector 훅을 사용해서,
SampleComponent을 아래와 같이 작성했을 때 발생하는 문제점과 해결방안은 무엇일까요?

const store = createStore({ count1: 0, count2: 0})

const useStoreSelector = <T, S>(
  store: Store<T>
  selector: (state: T) => S
) => {
  const [state, setState] = useState(()=> selector(store.getState()))

  useEffect(()={
    const unsubscribe = store.subscribe(()=> {
      setState(selector(store.getState()))
      setState(selector(store.getState()))
    })
    setState(selector(store.getState()))
    return unsubscribe
  }, [store, selector])

  return state
} 

const SampleComponent = () => {
  const state = useStoreSelector(
    store,
   (state) => state.count1
  )

  const inc = () => {
    store.setState((prev) => ({
      ...prev,
      count1: prev.count + 1
    }))
  }
}

[JoyJaewon]

useStoreSelector가 상태의 전체 내용을 반환할 경우, 값이 변경되지 않아도 렌더링이 발생할 수 있습니다. 이는 selector를 활용하여 필요한 상태만 반환하도록 수정해서 해결할 수 있습니다. 또한 useEffect는 store 또는 selector가 변경될 때 조금 늦게 실행되기 때문에, 재구독될 때까지 갱신되기 이전 상태값을 반환합니다. 이는 use-subscription 훅을 사용해 해결할 수 있습니다.

[RAINBOWJYP]

Q1. 58페이지 App 컴포넌트에서 count2가 변경되면 리렌더링 될 Parent내 자식컴포넌트를 말하고 리렌더링 되는 이유를 설명해주세요.
Q2. react useSyncExternalStore 훅에 대해 알려주세요! (답변 안하고 넘어가도 됩니다!!)

[whewchews]

A1. MemoCounter1과 MemoCount1가 모두 리렌더링됩니다. count2만 변경되었지만, 컨텍스트 공급자가 새로운 컨텍스트 값을 갖게 되면, 그 컨텍스트를 사용하는 모든 컨텍스트 소비자가 새로운 값을 받고 리렌더링되기 때문입니다.

createContext({ count1: 0, count2: 0 })라는 초기값을 가진 이 경우, 컨텍스트로 전달되는 값은 객체 형식입니다. 객체는 참조형 데이터이기 때문에, 리액트는 이 객체를 업데이트할 때 불변성을 유지하기 위해 기존의 객체를 수정하지 않고 새로운 객체를 생성합니다. 즉, count2만 바꾸더라도 새로운 객체가 생성됩니다.
컨텍스트가 새로운 객체로 변경되었기 때문에, 리액트는 그 객체를 사용하는 컴포넌트를 모두 리렌더링하게 됩니다.

A2. useSyncExternalStore는 React 18에서 새롭게 도입된 훅으로, 외부 상태의 변경을 React 컴포넌트에서 동기적으로 처리할 수 있도록 도와주는 훅입니다. 주로 외부 라이브러리나 상태 관리 시스템에서 상태를 가져와서 리액트 컴포넌트가 해당 상태를 구독하도록 할 때 유용하게 사용됩니다.

리액트는 기본적으로 props, state, context의 데이터가 바뀔 때 컴포넌트를 리렌더링합니다.
리액트 내부의 렌더링 시스템과는 별개로 동작하는, 외부 store나 외부 상태값의 변화를 감지하지 못합니다.
useSyncExternalStore 훅을 사용하면 외부 상태를 리액트의 렌더링 시스템에 통합해, 리액트의 리렌더링 방식을 일관되게 따르도록 통합할 수 있습니다.