React의 Context를 활용하여 전역 데이터를 다룬다.

기본 사용법

import { Iauth } from "@types";
import { createContext, useContext } from "react";

const AuthContext = createContext<Iauth | null>(null);

const useAuth = () => {
    const auth = useContext(AuthContext);
    if (!auth)
        throw new Error('Cannot find AuthContext');

    return auth;
}

export { AuthContext, useAuth }

• AuthContext.Provider 로 감싸면 자식에서 useAuth 을 통해 auth을 접근할 수 있다.

  <AuthContext.Provider value={{ useAuth }}>
      {children}
  </AuthContext.Provider>
  

  const { auth } = useAuthContext();
  

프로젝트에서 사용한 코드

• useReducer로 auth를 생성한다.
• reduce는 auth의 상태를 제어할 action을 명시한다.
• useMemo로 auth 상태를 제어할 함수를 작성하여 export한다.

import { IAuthContext, IUseAuth, IUser } from "@types";
import React, { createContext, useContext, useEffect, useMemo, useReducer } from "react";
import { getStorage, setStorage, rmStorage } from "./AsyncStorage";

const AuthContext = createContext<IAuthContext | null>(null);

const useAuthContext = () => {
    const context = useContext(AuthContext);
    if (!context)
        throw new Error('Cannot find AuthContext');

    return context;
}

const AuthContextProvider = ({ children }: { children: JSX.Element }) => {

    const reduce = (prevState: any, action: { type: string; userToken?: IUser; }) => {
        switch (action.type) {
            case 'RESTORE_TOKEN':
                return {
                    ...prevState,
                    isLoading: false,
                    userToken: action.userToken,
                };
            case 'SIGN_IN':
                return {
                    ...prevState,
                    isSignout: false,
                    userToken: action.userToken,
                };
            case 'SIGN_OUT':
                return {
                    ...prevState,
                    isSignout: true,
                    userToken: undefined,
                };
        }
    }
    const [auth, dispatch] = useReducer(reduce, {
        isLoading: true,
        isSignout: false,
        userToken: null,
    });

    useEffect(() => {
        const bootAsync = async () => {
            const userToken = await getStorage("userToken")
            dispatch({ type: 'RESTORE_TOKEN', userToken });
        };

        bootAsync();
    }, []);

    const useAuth: IUseAuth = useMemo(() => ({
        signIn: async (data) => {
            const {id, pw} = data;
            const tmpUser = { name: id, pw}
            await setStorage("userToken", tmpUser);
            dispatch({ type: 'SIGN_IN', userToken: tmpUser });
        },
        signOut: async () => {
            await rmStorage("userToken");
            dispatch({ type: 'SIGN_OUT' })
        },
        signUp: async (data) => {
            const tmpUser = { name: "tmpSignup" }
            await setStorage("userToken", tmpUser);
            dispatch({ type: 'SIGN_IN', userToken: tmpUser });
        },
    }), []);

    return (
        <AuthContext.Provider value={{ auth, useAuth }}>
            {children}
        </AuthContext.Provider>
    )
}

export { AuthContext, useAuthContext, AuthContextProvider }

활용하기

AuthContext 활용하기