Previous

• context API를 활용한, 컨텍스트는 싱글턴 패턴을 위해 설계된 것이 아닌, 싱글턴 패턴을 피하고 각 하위 트리에 서로 다른 값을 제공하기 위한 기능이다.

<aside> ✅ 전역 상태를 싱글턴과 유사하게 만들고 싶다면, 모듈 상태를 사용하는 것이 싱글턴 값으로 메모리에 할당되기 때문에 더좋다.

</aside>

• 리액트에서 모듈 상태를 사용하는 방법을 알아보자! 컨텍스트 보다는 덜 알려진 패턴이지만, 기존 모듈 상태를 통합하는데 자주 사용한다.

모듈 상태

• 모듈 수준에서 정의된 변수.
• 모듈이라고 하면, ES모듈 혹은 파일을 의미한다.
• 간단 ver. 함수 외부에 정의된 변수를 모듈 상태로 가정한다.

// number.ts
let count = 0;

• 이것이 모듈에 정의돼 있다고 가정하면 이것은 모듈 상태이다.

let state = {
	count = 0;
}

// state를 읽는 함수	
export const getState = () => state;

// 새로운 state를 받아서, 교체해 주는 함수
export const setState = (nextState) => {
	state = nextState
}

• 모듈 외부에서 사용할것 이니깐, 함수 앞에 export를 붙여준다.
• setState함수를 개선해보자! 함수로도 갱신할 수 있게 만든다.

export const setState = (nextState) => {
	state = typeof nextState === 'function' ? nextState(state) : nextState;
}

• 만약에 nextState가 함수라면, 이전 state를 넘겨서, state를 업데이트 할 수 있다 like this

  setState((prevState) => ({
  	...prevState,
  	count : prevState.count + 1
  }));
  

• 위의 상태와 함수들을 컨테이너 안에다가 넣고, 이 컨테이너를 실행할 수 있는 함수까지 만들 수 있다.