인프런 커뮤니티 질문&답변

제가 강의를 본 이후에 개인적으로 기능 따로 만들면서 일단 백엔드 공부가 안된 상태라, 간단히 제가 당장 필요한 것들은 할 수 있는 수준에서 사용하려고 포켓베이스라는 오픈소스 DB를 활용해서 진행하고 있는데요.

로그인 관련 일부 컴포넌트 관련해서 여기서 보여준 context 기능을 적용하려고 강의 영상 참고해서
logProvider.tsx는 아래처럼 적고

"use client";
import PocketBase from 'pocketbase';
import {createContext , ReactNode, useState} from 'react';

const pb = new PocketBase('http://localhost:8090');
export const LogContext = createContext( {
    IsLogIn: pb.authStore.isValid, 
    setLog: (log : boolean) => {},

})
type Props = {children: React.ReactNode};

export default function LogProvider({children}:Props) {
    const [IsLogIn, setLog] = useState(pb.authStore.isValid);


    return (
        <LogContext.Provider value={{IsLogIn: pb.authStore.isValid, setLog: (log: boolean) =>{} }}>
            {children}
        </LogContext.Provider>
    )
}

로그인 버튼 컴포넌트에서

const LoginButton = () => {
    const [loading, setLoading] = useState(false);
    const router = useRouter();
    const {IsLogIn, setLog} = useContext(LogContext);

    // const { isLoggedIn } = useContext(AuthContext);
    let logTest = pb.authStore.isValid;
    const handleClick = async () => {
      
      if (IsLogIn) {          //로그아웃 실행
        try {       
        // console.log(IsLogIn); //기존에 로그인 된 상태라면 여기서 true

        pb.authStore.clear();
        router.replace("/")
              //로그아웃 시 홈페이지로 이동   
        } catch (error) {
          console.error(error);
        }
        logTest = pb.authStore.isValid;
        setLog(pb.authStore.isValid);
      }
      
      else {              //로그인 실행
        setLoading(true);
     
        try {
          // console.log(IsLogIn); //기존에 로그아웃 된 상태라면 여기서 false
          const authData = await pb.collection('users').authWithOAuth2({ provider: 'google' });
          console.log(authData); // 인증 데이터 확인
          // 인증 데이터를 이용하여 사용자 정보 처리, 토큰 저장 등 로직 추가
        } catch (error) {
          console.error(error);
        } finally {
          setLoading(false);          
          logTest = pb.authStore.isValid;
          setLog(pb.authStore.isValid);
          
          //디버깅용
          console.log("로그인 상태 확인")
          console.log(IsLogIn);
          console.log(pb.authStore.isValid);
          console.log(setLog)
          console.log(setLog(pb.authStore.isValid));
          console.log(logTest);
          console.log(setLog(logTest));

        }

      }
    };

    return (
      
      <div >
      <button className='logBox' onClick={handleClick} disabled={loading}>
      <img                
            src="/Google.png"       
            width={20}
            height={20}             
            style={{ position: "absolute", opacity: 0.8, marginLeft:0, marginTop: 3}} 
      />

      
        <div className="flex-LogButton" >
        {IsLogIn ? '로그아웃' : (loading ? '로그인 중...' : ' 로그인')}
        </div>

      </button>
      </div>
     
    );
  };

이런 식으로 작성을 하였습니다. 그런데 버튼기능 마지막에 디버깅용으로 넣은 console값을 보니 로그인하면 로그인은 정상적으로 진행되는데 context로 공유하고 있는 IsLogIn 값은 바뀌질 않네요... 부모 컴포넌트에서 자식컴포넌트로의 공유는 제대로 되는것으로 보입니다. 자식에게서 부모로 가는게 setLog에서 타입문제로 입력이 안되는 듯 한데, 이건 그냥 제가 타입스크립트 개념이 약해서 타입 설정을 어떻게 할지 몰라서 생기는 문제 같네요;;
아래는 디버깅용으로 넣은 7줄의 콘솔로그 기록입니다.

로그인 상태 확인

LogButtonSNS.tsx:52 false

LogButtonSNS.tsx:53 true

LogButtonSNS.tsx:54 (log)=>{}

LogButtonSNS.tsx:55 undefined

LogButtonSNS.tsx:56 true

LogButtonSNS.tsx:57 undefined

콘솔 로그 기록을 보면 logProvider.tsx
setLog: (log : boolean) => {}, 함수를 통해 boolean정보를 새로 넣어도 공유하는 IsLogIn의 value가 바뀌지 못하고 undefined라고 출력되네요. 어떻게 수정해야 할까요...