session에 대한 전역상태관리 useContext 흐름 이해하기(react, ts)

(시작하기에 코드의 흐름이 아닌, useContext 원리의 흐름임을 명시한다.)

예시는 웹에서 기본이 되는 로그인 정보를 담는 session에 대한 전역상태이다. 

 

1. session-context 만들기

context를 만드는 뼈대는 다음과 같다.

// session-context.tsx

const SessionContext = createContext(); // [1]

export const SessionProvider = ({ children }: PropsWithChildren) => {
  return ()
}; // [2]

export const useSession = () => useContext(SessionContext); // [3]

 

[1] 일단 session을 담을 context를 create할 것

[2] create한 것을 Provider로 제공해줄 것

[3] 사용하는 쪽을 위해 useSession을 만들어줄 것

 

---

 

이걸 시작으로 세부 내용을 채워보자. 

 

(1) createContext() 안에 초기값을 채워줄 것

// session-context.tsx

const CounterContextInitValue = {
  count: 0,
  plusCount: () => {},
  minusCount: () => {},
};

type TCounterContext = typeof CounterContextInitValue;

const CounterContext = createContext<TCounterContext>(CounterContextInitValue);

 

초기값 객체 자체를 createContext()안에 넣어주어도 되나, type 정의의 간편성을 위해

초기값을 contextInitValue로 변수화하고, 타입은 typeof를 사용해 간단하게 처리할 수 있다.

(초기값이 복잡하지 않은 경우 굳이 그럴 필요가 없겠지?!)

 

---

(2) Provider 안에 상태와, 그 상태를 조작할 함수를 생성하고, 이를 원하는 컴포넌트에 전달할 것

// session-context.tsx

export const SessionProvider = ({ children }: PropsWithChildren) => {
	
  ...(state)  // [2-1]
  const session = ...;  // [2-2]
  const logout = ...;
  const login = ...;
  
  return (
    <SessionContext.Provider value={{ session, logout, login }}>  // [2-3]
      {children}  // [2-4]
    </SessionContext.Provider>
  );
};

 

[2-1] useState를 이용해 (전역에서 사용할) 상태관리를 한다

(참고)
state가 변경되면 해당 상태를 이용하는 모든 컴포넌트는 리랜더링된다.
주의! state뿐만 아니라, ([2-2]에서 만들어진)‘함수’를 전달받아 사용하고 있는 컴포넌트 또한 리랜더링된다
왜냐? state를 가지고 있는 Provider가 새로운 function object로 재할당 → 주소가 바뀌기 때문
그래서! Provider 안에 있는 함수를 useCallback을 통해 메모이제이션할 예정임

 

[2-2] 상태를 조작하는 함수를 생성한다

[2-3] value를 통해 전역에 전달하고 싶은 것들(값 또는 함수)을 싣는다

[2-4] 전역상태를 받게 하고싶은 컴포넌트들을 {children}이라고 명시한 것, 

전역상태를 받아서 사용할 컴포넌트들은 <SessionProvider> </SessionProvider>로 감싸줄 예정

 

---

(3) 사용하는 쪽을 위해 useSession을 만들어줄 것

전역상태를 받아서 사용할 컴포넌트들에서의 편의를 위한 코드이다.

이렇게 해놓지 않을 경우, 전역상태를 받아서 사용할 때마다 ~~을 해주어야 한다. 

(주의)
export const useSession = () => useContext(SessionContext);
화살표 함수로 생성된 이유는,
useContext 자체가 아닌, useContext를 실행한 결과값이 useSession이어야 하기 때문이다. 

 

---

 

2. session-context 사용하기