리액트 컨텍스트를 이용한 컴포넌트 상태 공유

const App = () => {
  const [count, setCount] = useState(0);
	return <Parent count={count} setCount={setCount}/>
}
 
const Parent = ({ count, setCount }) => {
  return (
    <>
      <Child1 count={count} setCount={setCount} />
      <Child2 count={count} setCount={setCount} />
    </>
  );
};

const CountStateContext = createContext({
	count: 0,
	setCount: () => {},
});
 
const App = () => {
  const [count, setCount] = useState(0);
	return (
		<CountStateContext.Provider
			value={{ count, setCount }}
		>
			<Parent />
		</CountStateContext.Provider>
	);
}
 
const Parent = () => {
  return (
    <>
      <Child1 />
      <Child2 />
    </>
  );
};
 
const Child1 = () => {
	const { count, setCount } = useContext(CountStateContext);
	return ~~~~;
}
const Child2 = () => {
	const { count, setCount } = useContext(CountStateContext);
	return ~~~~;
}

// 합쳐진 큰 객체
const CountContext = createContext({ count1: 0, count2: 0, ... });
 
// 작은 상태 조각 만들기
const Count1Context = createContext({ count1: 0, ... });
const Count2Context = createContext({ count2: 0, ... });
 
=> 말은 거창하지만 위와 같이 단순히 같은 주제의 데이터끼리 하나의 컨텍스트로 묶어 합쳐진 큰 객체 사용에서
	 하나의 상태 변경으로 인한 여러 소비자 컴포넌트의 리렌더링을 줄일 수 있다.

const Count1Context = createContext(0);
const Count2Context = createContext(0);
const DispatchContext = createContext<Dispatch<Action>>(() => {});
 
const Count1 = () => {
	const count1 = useContext(Count1Context);
	const dispatch = useContext(DispatchContext);
 
	return (
		<>
			<button onClick={() => dispatch({ type: ACITON_NAME })}>
			</button>
			// ...
		</>
	)
};
 
const Count2 = () => {
	const count2 = useContext(Count2Context);
	const dispatch = useContext(DispatchContext);
 
	return (
		<>
			<button onClick={() => dispatch({ type: ACITON_NAME })}>
			</button>
			// ...
		</>
	)
}
 
// 상위 컴포넌트에서 useReducer를 통해 상태를 생성하고, 공급자를 통해 컨텍스트에 값을 넣어줌

type CountContextType = [
	number,
	Dispatch<SetStateAction<number>>
];
 
const CountContext = createContext<CountContext | null>(null);
 
// 공급자 컴포넌트
export const CountProvider = ({
	children
} : {
	children: ReactNode
}) => (
	<CounterContext.Provider value={useState(0)}>
		{children}
	</CounterContext.Provider>
);
 
// 사용자 정의 훅
export const useCount = () => {
	cosnt value = useContext(CountContext);
	if(value == null) throw new Error("Provider missing!");
	return value;
}

const createStateContext = (
	useValue: (init) => State,
) => {
  const StateContext = createContext(null);
  const StateProvider = ({
	  initialValue,
	  children
	}) => (
		<StateContext.Provider value={useValue(initialValue)}>
			{children}
		</StateContext.Provider>;
  );
 
  const useContextState = () => {
    const value = useContext(StateContext);
    if (value === null) throw new Error('Provider missing!');
    return value;
  };
 
  return [StateProvider, useContextState] as const
};

const App = () => {
	const providers = [...]; as const;
 
	return providers.reduceRight(
		(children, [Component, props]) =>
			createElement(Component, props, children),
		<Parent />,
	);
};

const App = () => {
  const [count, setCount] = useState(0);
 
  return (
    <CountStateContext.Provider value={{ count, setCount }}>
      <Parent />
    </CountStateContext.Provider>
  );
};

💡 Provider가 새로운 값을 갖게 되면, 이 값을 사용하고 있는 컴포넌트들은 모두 리렌더링된다.
``

const ColorContext = createContext('black');
 
const ColorComponent = () => {
  const color = useContext(ColorContext);
  const renderCount = useRef(1);
 
  useEffect(() => {
    renderCount.current += 1;
  });
 
  return (
    <div style={{ color }}>
      Hello {color} (renders: {renderCount.current})
    </div>
  );
};

💡 memo도 컨텍스트 값을 사용하고 있는 컴포넌트의 리렌더링을 막지는 못한다.

const CountContext = createContext({ count1: 0, count2: 0 });

📌 궁금한 점
- 전역 상태를 위하지 않은 컨텍스트도 있는가?

🤔 컨텍스트를 전역 상태로 사용했을 때, 리렌더링 문제 존재 어떻게 해결해볼 수 있을까?

export const Count1Provider = ({ children }) => {
  return <Count1Context.Provider value={useState(0)}>{children}</Count1Context.Provider>;
};

export const useCount1 = () => {
  const value = useContext(Count1Context);
  if (value === null) throw new Error('Provider missing');
  return value;
};

const createStateContext = (useValue) => {
  const StateContext = createContext(null);
  const StateProvider = ({ initialValue, children }) => {
    return <StateContext.Provider value={useValue(initialValue)}>{children}</StateContext.Provider>;
  };
 
  const useContextState = () => {
    const value = useContext(StateContext);
    if (value === null) throw new Error('Provider missing');
    return value;
  };
 
  return [StateProvider, useContextState] as const
};

📌 toss/slash에서도 이런 느낌(?)의 유틸을 제공하고 있다.