React 리팩토링 - window.location.reload() 사용 하면 안되는 이유

window.location.reload()를 사용하면 전체 어플리케이션이 리로드 되면서 모든 상태가 초기화된다

즉 리액트에서 해주는 모든 상태 관리가 무의미해진다.

로그인 상태를 관리하려면 useState, useContext, Redux를 이용해 로그인 상태 관리가 가능하다.

 

잘못 사용하면 코드가 아래와 같다.

  

    
    
    
    
  
function LoginPage() {
  const [user, setUser] = useState(null);

  const login = async () => {
    const userData = await fakeLoginAPI(); // 가짜 로그인 API 호출
    setUser(userData);
    window.location.reload(); // 😡 이렇게 하면 상태 관리가 무의미해짐
  };

  return (
    <div>
      {user ? <p>안녕하세요, {user.name}님!</p> : <button onClick={login}>로그인</button>}
    </div>
  );
}

 

문제점 정리

1. setUser(userData)로 로그인 상태를 업데이트했지만, reload()가 실행되면서 모든 상태가 날아간다.

2. 결국 useState를 사용한 의미가 없어지고 localStoage나 sessionStoarage에서 다시 상태를 가져와야 한다.

 

window.loaction.reload()로 새로고침을 하면 모든 컴포넌트가 다시 마운트되므로 기존에 가져온 데이터도 다시 요청하게 된다.

이렇게 되면 불필요한 API 요청이 증가해서 서버 부하가 커진다.

 

그러면 어떻게 해결해야 되나!!??

  

    
    
    
    
  
function LoginPage() {
  const [user, setUser] = useState(() => {
    return JSON.parse(localStorage.getItem("user")) || null; // 저장된 로그인 정보 불러오기
  });

  const login = async () => {
    const userData = await fakeLoginAPI(); // 가짜 로그인 API 호출
    localStorage.setItem("user", JSON.stringify(userData)); // 로컬스토리지에 저장
    setUser(userData); // 상태 업데이트 (새로고침 없이)
  };

  return (
    <div>
      {user ? <p>안녕하세요, {user.name}님!</p> : <button onClick={login}>로그인</button>}
    </div>
  );
}

이런 식으로 코드를 짜야한다.

로컬 스토리지에 데이터를 저장해주고 setUser(userData); 로 상태 설정을 해 주면 된다.

 

1. setUser()를 사용해 상태를 업데이트하므로 새로고침 없이 UI가 즉시 반영된다.

2. 로그인 상태를 localStorage에 저장하면 새로고침 후에도 로그인 유지가 가능하다.

 

로그인할 때마다 새로고침이 발생하면 사용자는 페이지가 깜빡거리는 불편함을 느낀다. SPA 개발 시에는 이런 불필요한 새로고침은 꼭 피하는 게 중요하다.

 

1. Context API를 사용

React useContext를 사용하면 로그인 상태를 전역으로 관리가 가능하다.

AuthContext.js 파일에서 로그인 상태 관리 로직을 아래와 같이 구현 가능하다.

  

    
    
    
    
  
import { createContext, useState, useEffect } from "react";

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(() => {
    return JSON.parse(localStorage.getItem("user")) || null;
  });

  const login = (userData) => {
    localStorage.setItem("user", JSON.stringify(userData));
    setUser(userData);
  };

  const logout = () => {
    localStorage.removeItem("user");
    setUser(null);
  };

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthContext;

 

App.js(AuthProvider 적용)

  

    
    
    
    
  
import { AuthProvider } from "./AuthContext";
import LoginPage from "./LoginPage";

function App() {
  return (
    <AuthProvider>
      <LoginPage />
    </AuthProvider>
  );
}

export default App;

LoginPage.js(Context에서 로그인 상태 가져오기)

  

    
    
    
    
  
import { useContext } from "react";
import AuthContext from "./AuthContext";

function LoginPage() {
  const { user, login } = useContext(AuthContext);

  return (
    <div>
      {user ? <p>안녕하세요, {user.name}님!</p> : <button onClick={() => login({ name: "홍길동" })}>로그인</button>}
    </div>
  );
}

AuthContext를 사용하면 새로고침 없이 로그인 상태가 전역에서 즉시 반영된다.

불필요한 새로고침 없이 자연스럽게 로그인 UI 변경 가능!

 

🔥 결론: window.location.reload()를 쓰지 않고 상태 업데이트를 활용하자!

window.location.reload()는 다음과 같은 문제를 유발할 수 있어:

1. React의 상태 관리가 무의미해짐
2. 불필요한 네트워크 요청 증가
3. UX가 나빠짐 (화면 깜빡임)
4. 전체 페이지 리렌더링으로 성능 저하

대신, 다음 방법을 사용하자!

• useState, useContext, Redux 같은 React의 상태 관리 기능을 활용
• localStorage 또는 sessionStorage를 사용해 로그인 상태 유지
• AuthContext를 만들어서 전역적으로 로그인 상태를 관리

이렇게 하면 React의 장점을 살리면서도 로그인 상태를 자연스럽게 업데이트할 수 있어! 🚀