Context API

어떤 상태(state)를  전체적으로 공유하기 위함이다.

 

3가지만 기억하면 된다.

1.createContext 만들기

2.Provider(껍데기) 만들기

3.내가 쓸 곳에 씌워주기.

 

1.createContext 만들기

const UserContext = createContext<타입>(초기값)

 

 

2.껍데기 만들기

export default function AtuhProvider({children} : {children : Type}) 
{
안에서 state와 state함수 
return ( <껍데기> {children} </껍데기> )
}

 

3.내가 쓸 곳에 놓기.

//app.tsx

<AuthProvider> <route 어쩌구> <AuthProvider/>

 

 

 

 

심화적으로 보겠다.

import { createContext, useState } from "react";
import getAuthDataFromLocalStorage from "../pages/login/get_auth_from_local/get_auth_from_local";
import { AuthData } from "../type/user";

interface UserContextType {
  userInfo: AuthData | null;
  setUserInfo: React.Dispatch<React.SetStateAction<AuthData | null>>;
}

export const UserContext = createContext<UserContextType>({
  userInfo: null,
  setUserInfo: () => {},
});

// AuthProvider를 생성합니다.
export default function AuthProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  // useState 훅을 사용하여 상태를 관리합니다.
  const [userInfo, setUserInfo] = useState<AuthData | null>(
    getAuthDataFromLocalStorage(),
  );

  return (
    // UserContext.Provider를 사용하여 전역 상태를 설정합니다.
    <UserContext.Provider value={{ userInfo, setUserInfo }}>
      {children}
    </UserContext.Provider>
  );
}

 

 

 

컨텍스트 APi에 단점도 물론 존재한다.

1.불필요한 리렌더링

2.컴포넌트의 재사용성 저하

3.상태 관리의 복잡성 증가

4.디버깅 어려움

5.의존성 관리 문제

 

나중에 useMemo를 사용해서 메모이제이션도 쓸 수 있다.

 

 

 

 

 

 

 

//부록

//로컬스토리지에서 유저정보를 가져오는 함수


import { AuthData } from "../../../type/user";

export default function getAuthDataFromLocalStorage(): AuthData | null {
  let isAuth = true;
  const result = {
    id: localStorage.getItem("id"),
    nickname: localStorage.getItem("nickname"),
    refresh: localStorage.getItem("refresh"),
    access: localStorage.getItem("access"),
  };
  Object.keys(result).forEach((key) => {
    if (result[key as keyof AuthData] === null) {
      isAuth = false;
    }
  });
  return isAuth ? result : null;
}