[인스타그램클론코딩] #10.6 AuthContext part One (useContext)

안녕하세요 강정호입니다.

 

오늘은 로그인 여부에 따라서 화면을 보여주는 프론트 로직을 구현해보았습니다.

 

import React, { createContext, useContext, useState } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";


export const AuthContext = createContext();

export const AuthProvider = ({isLoggedIn: isLoggedInProp, children}) => {

    const [isLoggedIn, setIsLoggedIn] = useState(isLoggedInProp);

    /** logUserIn 함수 호출 : AsyncStorage에 로그인 여부 true 세팅, hook으로 로그인 여부 true 세팅 */
    const logUserIn = () => {
        try{
          AsyncStorage.setItem("isLoggedIn", "true");
          setIsLoggedIn(true);
        }catch(e){
          console.log(e);
        }
      };
      
    /** logUserOut 함수 호출 : AsyncStorage에 로그인 여부 false 세팅, hook으로 로그인 여부 false 세팅 */
    const logUserOut = () => {
      try{
        AsyncStorage.setItem("isLoggedIn", "false");
        setIsLoggedIn(false);
      }catch(e){
        console.log(e);
      }
    };

      return (
            <AuthContext.Provider value={{isLoggedIn, logUserIn, logUserOut}} >
              {children}
            </AuthContext.Provider>
      );
};

export const useIsLoggedIn = () => {
  const isLoggedIn = useContext(AuthContext);
  console.log(isLoggedIn);
  return isLoggedIn;
};

export const useLogIn = () => {
  const logUserIn = useContext(AuthContext);
  return logUserIn;
};

export const useLogOut = () => {
  const logUserOut = useContext(AuthContext);
  return logUserOut;
};

 

useContext를 사용하는 이유?

Context : 일반적으로는 부모 --> 자식 방향으로 props를 통해서 전달하지만, 리액트 앱 내에서 여러 컴포넌트에 데이터를 전달해야 하는 경우 Context를 사용합니다. Context는 리액트 내부에서 전역(global)적으로 데이터를 공유해야 하는 목적을 위해서 고안되었다. 예를 들면 테마, 로그인 여부 등등 입니다.

(출처 : ko.reactjs.org/docs/context.html)

 

createContext(defaultValue)

const AuthContext = createContext();

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

 

Context.Provider

 <AuthContext.Provider value={{isLoggedIn, logUserIn, logUserOut}} >
 	{children}
 </AuthContext.Provider>

 Context 컴포넌트에 포함된 리액트 컴포넌트로서 Context를 구독하는 컴포넌트들에게 context의 변화를 알리는 용도로 사용한다.

Provider는 value 프롭을 받아서 하위 컴포넌트들에게 전달합니다. Context 컴포넌트를 구독하는 하위 컴포넌트들은 value 값이 변할 때마다 렌더링이 됩니다.

 

App.js 에서 받은 isLoggedIn(로그인여부)를 AuthContext.js에서는 Provider를 사용해 Context를 구독하는 컴포넌트들에게 로그인 상태의 변화를 알리는 용도로 사용된다.

 

Context를 구독하는 컴포넌트

export const useIsLoggedIn = () => {
  const isLoggedIn = useContext(AuthContext);
  console.log(isLoggedIn);
  return isLoggedIn;
};

export const useLogIn = () => {
  const logUserIn = useContext(AuthContext);
  return logUserIn;
};

export const useLogOut = () => {
  const logUserOut = useContext(AuthContext);
  return logUserOut;
};

createContext로 생성된 AuthContext를 로그인여부 확인, 로그인, 로그아웃 컴포넌트들이 구독을 한다.