2주차 리뷰

[choisohyun]

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

[RAINBOWJYP]

컨텍스트를 활용한 전역상태 관리에 대해서 배웠다.
컨텍스트를 사용할 때 무심코 객체를 사용해왔는데 객체를 사용함에 따라 발생하는 리렌더링 이슈에 대해 고려해봐야겠다는 생각이 들었다. 그렇다고 추가 리렌더링을 피하기 위해 오버엔지니어링을 하는 것은 가치가 없을 수 있음을 새겨본다. 무작정 props drilling이 발생하면 상태 관리 라이브러리로 전역 상태를 관리해서 컨텍스트 사용을 잘 안하는 편이다. 어떤 경우에 컨텍스트로 상태를 전달하는게 좋은지 알고 싶다.
4장 구독이라는 개념은 낯설었다. 그래서 이해를 완전히 하지 못했다. 모듈 상태를 리액트에서 전역 상태로 사용할 수 있다는 정도만 파악하고 react useSyncExternalStore훅에 대해 따로 알아보기로 결심했다.

[choisohyun]

• 추가적인 리렌더링은 기술적으로 피해야 하는 순수하게 불필요한 연산이다. 하지만 성능에 큰 문제가 없다면 대체로 괜찮다.
• jsx에서 prop으로 바로 useState()를 넣을 수 있다는 것을 처음 알았습니다. React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.(react-hooks/rules-of-hooks) 이런 에러가 떠서 리턴문 안에서는 아예 안되는줄 알았어서 신기합니다.
• createStateContext 같은 팩토리 패턴도 공통적인 컨텍스트 코드에 적용해볼 만 한 것 같습니다.
• reduceRight으로 중첩이 깊어지는 것을 막는 법도 신선했습니다.
• apollo에 useSubscribtion이 유명한 것 같네요

[hamo-o]

사용자 정의 훅이 있는 팩토리 패턴?

사용자 정의 훅 + 공급자 컴포넌트 만들기 → 반복적 작업..
→ 이걸 해주는 함수를 만들자! (팩토리 패턴)

Provider와 사용자 정의 훅을 적어주는 코드를 반복적으로 작성하면서 간소화 할 생각을 못했던 것 같아 바로 적용해 보기로 했습니다.

---

reduceRight 를 이용한 공급자 중첩 방지

const App = () => {
	const providers = [
		[Counter1Provider, {initialValue: 10}],
		[Counter2Provider, {initialValue: 20}],
		[Counter3Provider, {initialValue: 30}],
		[Counter4Provider, {initialValue: 40}],
		[Counter5Provider, {initialValue: 50}],
	] as const;
	return providers.reduceRight(
		// 오른쪽에서부터 배열을 읽으며 누산된 값을 children으로 넣어준다.
		// 즉 Parent의 부모로 Counter5Provider를 붙이고,
		// 만들어진 컴포넌트의 부모로 Counter4Provider를 붙이는 식.
		(children, [Component, props]) => createElement(Component, props, children),
		<Parent />,
	);
};

자식 컴포넌트를 먼저 만들고 부모에 붙이는 식으로 createElement를 활용해야 하기 때문에, reduceRight를 활용해서 reduce와는 반대로 배열의 오른쪽부터 순회하며 만들어 줄 수 있겠네요!

[whewchews]

요약

• 3-4장은 리액트에서 전역상태를 구현하기 위한 패턴에 대한 내용을 다룬다.
• 3장은 리액트 컨텍스트로 전역관리를 하는 법에 대해 다룬다. 컨텍스트는 컴포넌트 트리 안에서 직접적인 상속이 아니더라도 데이터를 공유할 수 있는 방법이다. 싱글턴을 지향하기 보다, 하위 트리에 서로 다른 값을 제공하기 위한 기능이다.
• 4장에서는 전역 상태를 싱글턴 처럼 사용할 수 있도록 하는 모듈 상태 공유에 대해 다룬다.

생각

• 실시간으로 변경되는 데이터를 어떻게 관리할 것인가(상태관리)
• 어떻게 의존성이 적고 결합도가 낮은 코드구조를 만들 수 있을 것인가에 대한 고민한 결과 만들어진 리액트의 훅들이 등장한다(useContext, useSubscription).

컨텍스트에서 꼭 기억해야 하는 부분

• 컨텍스트 공급자가 새로운 값을 받으면 모든 컨텍스트 소비자 컴포넌트가 리렌더링된다.
• 자식 컴포넌트가 리랜더링 되는 이유는 두가지이다. 부모 컴포넌트와 컨텍스트.