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

안녕하세요 이정환입니다.

최상위 컴포넌트인 App 컴포넌트에 auth State를 만들어 다음과 같이 처리하시면 어떨까요?

• auth State를 보관하고 관리하기 위한 Context 생성 : AuthContext

• 위 Context의 Provider 컴포넌트를 App 컴포넌트의 자식 요소들로 설정하여 전역으로 적용되는 컨텍스트로 설정함

• 사용자 로그인시 AuthContext의 auth State 값 변경

• AuthContext 에서는 useEffect로 auth State의 값이 변경될 때 sessionStorage(or localStorage)에 인증 정보 갱신

   

위와 같이 설정하시면 State에 먼저 정보를 보관하고 그리고 나서 useEffect를 통해 sessionStorage에 정보를 저장하는 형태로 변경됩니다. 우리 강의의 감정일기장과 동일한 순서라고 보시면 될 것 같아요

추가로 새로고침시에 로그인 정보를 유지하는 방법은 간단하죠?! 감정일기장과 동일하게 App 컴포넌트의 마운트 시점에 AuthContext의 auth State의 값을 sessionStorage에 저장된 값으로 갱신시켜주시면 됩니다.

안녕하세요, 인프런 AI 인턴입니다. 황지호님.

로그인 상태를 다루면서 sessionStorage와 상태 관리 주제로 인한 문제는 많은 분들이 겪는 어려움입니다. 이와 관련하여 유사한 문제를 해결한 기존 게시글이 있습니다. 여기에서 필요한 힌트를 얻으실 수 있을 것입니다.

아래 링크에서 관련 정보를 확인해보세요:
- React에서 로그인 상태 유지하기 - sessionStorage와 useEffect

요약: sessionStorage에 로그인 정보를 저장하고 이를 통해 상태를 관리할 때는 useEffect를 활용하여 컴포넌트가 렌더링될 때마다 sessionStorage에서 값을 가져와 상태를 업데이트할 수 있습니다.

1. sessionStorage에 로그인 정보 저장: 로그인 후 sessionStorage에 정보를 저장합니다.
   
2. useEffect를 활용한 상태 업데이트: 최상위 컴포넌트(App 컴포넌트)에서 useEffect를 사용하여 컴포넌트가 마운트될 때 sessionStorage에서 값을 가져와 상태를 설정합니다.
   
3. context로 상태 제공: 최상위 컴포넌트에서 context를 통해 하위 컴포넌트에 상태를 제공합니다.
   

다음은 예시 코드입니다:

// App 컴포넌트
import React, { useEffect, useState, createContext } from 'react';

export const UserContext = createContext(null);

const App = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const loggedInUser = sessionStorage.getItem('user');
    if (loggedInUser) {
      setUser(JSON.parse(loggedInUser));
    }
  }, []);

  return (
    <UserContext.Provider value={user}>
      <MainComponent />
      {/* 다른 컴포넌트들 */}
    </UserContext.Provider>
  );
};

// Main 컴포넌트
import React, { useContext } from 'react';
import { UserContext } from './App';

const MainComponent = () => {
  const user = useContext(UserContext);

  return (
    <div>
      {user ? <p>Welcome, {user.name}</p> : <p>Please log in.</p>}
    </div>
  );
};

이 방법을 통해 새로고침 없이 로그인 상태를 유지하고 하위 컴포넌트에서도 상태값을 사용할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.