[React] 로그인 여부에 따른 nav

React에서 로그인 상태에 따라 내비게이션 바 관리하기

 

React에서 사용자 로그인 여부에 맞춰 다른 내비게이션을 보여주고 싶었다. 로컬 스토리지를 이용해 로그인 여부를 확인하고, 로그인/아웃 상태에 따라 내비게이션 컴포넌트를 조건부 렌더링하는 방법을 고려해볼 수 있다.

 

 

◆ 로그인 상태에 따른 조건부 내비게이션

 

<Header> 컴포넌트에서 로그인에 따라 LoginNav, LogoutNav 컴포넌트를 조건부로 보여주기 위해 localStorage에서 사용자 정보를 확인하고, 로그인된 상태면 LoginNav, 로그아웃된 상태면 LogoutNav를 렌더링하도록 설정하면 된다.

 

const Header = () => {
  const user = JSON.parse(localStorage.getItem("user"));
  const isLoggedIn = !!user;

  return (
    <header className="bg-primary-color p-4 shadow-md">
      <div className="container mx-auto flex justify-between items-center">
        <div>
          <Link to="/" className="text-lg font-semibold text-white">
            Home
          </Link>
        </div>
        <div>{isLoggedIn ? <LoginNav /> : <LogoutNav />}</div>
      </div>
    </header>
  );
};

// localStorage에서 사용자 데이터를 직접 가져와 isLoggedIn이라는 boolean 값을 사용하여 로그인 여부를 판단

 

 

◆ 상태 관리와 리렌더링 문제

 

이렇게 하면 로그인 여부를 확인할 수 있지만, localStorage의 변경 사항이 반영되지 않을 수 있다. 다른 탭에서 로그인/아웃할 때 현재 탭의 컴포넌트는 리렌더링되지 않을 것이다. React 상태 관리를 통해 localStorage의 변경점을 감지하고 로그인 상태를 업데이트해줄 수 있다.

 

import { useState, useEffect } from "react";

const Header = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem("user"));

  useEffect(() => {
    const handleStorageChange = () => {
      setIsLoggedIn(!!localStorage.getItem("user"));
    }; // useEffect Hook으로 컴포넌트 마운트 시 storage 이벤트 감지

    window.addEventListener("storage", handleStorageChange);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
    };
  }, []);

  return (
    <header className="bg-primary-color p-4 shadow-md">
      <div className="container mx-auto flex justify-between items-center">
        <div>
          <Link to="/" className="text-lg font-semibold text-white">
            Home
          </Link>
        </div>
        <div>{isLoggedIn ? <LoginNav /> : <LogoutNav />}</div>
      </div>
    </header>
  );
};

 

 

◆ LogoutNav도 만들기

 

const LogoutNav = () => {
  const handleLogout = () => {
    localStorage.removeItem("user");
    window.dispatchEvent(new Event("storage"));
  };

  return (
    <nav>
      <button onClick={handleLogout} className="text-white">
        로그아웃
      </button>
    </nav>
  );
};

 

 

React 상태와 로컬 스토리지 연동
React 상태(useState)와 useEffect Hook을 사용해서 로컬 스토리지의 변경을 감지하고 컴포넌트의 상태를 업데이트할 수 있다. 이를 통해 UI와 데이터의 일관성을 유지한다.

 

브라우저 storage
storage 이벤트를 통해 여러 탭에서 발생하는 로컬 스토리지 변경 사항을 반영할 수 있다. 사용자가 여러 탭을 열어 놓아도 로그인 상태가 일관되게 유지된다.

 

조건부 렌더링과 사용자 경험
로그인, 로그아웃된 상태에 따라 내비게이션 요소를 동적으로 변경해줌으로써 더 나은 사용자 경험을 제공한다.

 

 

◆ 더 알아볼 내용

 

프로젝트의 규모가 커지면 Context API, Redux 등 전역 상태 관리 도구로 로그인 상태를 관리하게 된다. 로그인 상태를 더 효율적으로 여러 컴포넌트에 전달하고 관리할 수 있다.