미라클 메모리

목차

구조

How to use CreateContext

Context - React

const MyContext = React.createContext(defaultValue);

Context 객체를 만듭니다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽습니다.

<MyContext.Provider value={/* 어떤 값 */}>

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.

Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다. 값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다. Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시됩니다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 됩니다. Provider로부터 하위 consumer(.contextType와 useContext을 포함한)로의 전파는 shouldComponentUpdate 메서드가 적용되지 않으므로, 상위 컴포넌트가 업데이트를 건너 뛰더라도 consumer가 업데이트됩니다.

useContext를 사용하자

export const DiaryStateContext = React.createContext();
export const DiaryDispatchContext = React.createContext();

전역에 데이터를 제공할 컨텍스트 생성

<DiaryStateContext.Provider value={data}>
	<DiaryDispatchContext.Provider value={memoizedDispatches}>
			<DiaryEditor />
			<DiaryList />
	</DiaryDispatchContext.Provider>
</DiaryStateContext.Provider>

이때 Context를 두 개 만든 이유는 무엇일까? DiaryStateContext를 통해 데이터가 전역에 공급이 될 예정이며 DiaryDispatchContext를 함수들을 전달한다. 이렇게 구분을 둔 이유는 context역시도 컴포넌트이기 때문이다. 그렇기에 상태값이 변화되면 리렌더링된다. 데이터를 공급하는 컴포넌트 같은 경우에는 데이터가 변경이되면 리렌더링이 발생한다. 그때, 함수까지 함께 상태변경이 되는것은 비효율적이다.

memoizedDispatches??

const memoizedDispatches = useMemo(() => {
    return { onCreate, onRemove, onEdit };
  }, []);