리액트 컴포넌트에서 페이지를 이동하는 다양한 방법 (with. mypage → login 페이지로 이동하기, 예외처리)

목표:

리액트를 사용하면 아무래도 window.location.href와 같은 방법보다 리액트의 기능을 사용한 SPA 스타일로의 페이지 전환이 좋지 않을까? 싶어 찾아보고 정리해본다.

 

 

 

리액트 환경을 이용한 페이지 전환 방법

	✅ useNavigate	Link 컴포넌트
정의	React Router v6 이상 환경에서 useNavigate를 사용하여 페이지 전환	React Router 환경에서 Link 컴포넌트를 사용하여 페이지 전환
특징1	- SPA 스타일로 페이지 이동 - 새로고침 ❌ - 빠르게 전환 가능
목적	코드 조건에 따른 동적인 이동 방식	정적인 페이지 이동 방식
특징2	- 함수 호출을 통한 동적인 페이지 전환이 가능 - 이벤트 핸들러나 API 호출 후 특정 페이지로 이동할 때 사용 가능 - 브라우저 새로고침 없이 SPA 스타일로 전환됨	- 사용자가 클릭을 하면 이동하는 방식 ∴ nav 메뉴, button, text, 컴포넌트 등을 클릭시 페이지 이동하는 방식 - 사용자에게 경로를 보여주는 네비게이션이 필요할 때 사용하기 좋음 - 단순한 링크 역할: 간단한 페이지 이동 시 더 직관적으로 작성 가능
단점	단순한 페이지 이동 시 과한 대처일 수 있음	동적인 페이지 전환에는 부적합
사용	설치: npm install react-router-dom 불러오기: import { useNavigate } from "react-router-dom"; 저장하기: const navigate = useNavigate(); 이동하고픈 페이지경로 작성하기: navigate("/user/login");	불러오기: import { Link } from "react-router-dom"; 이동하고픈 페이지경로 작성하기: <Link to="/user/login">    <button>로그인 페이지로 이동</button> </Link>
동작 방식	함수 호출로 페이지 이동	컴포넌트 클릭시 페이지 이동

 

 

 

---

 

 

 

주제:

사용자는 내가 의도한대로 움직이지 않는다

 

개발자 취업을 더 효율적으로 준비하기 위해 최근부터 다양한 사람들의 경험을 찾아보게 된다.

오늘의 주제는 사용자는 내가 의도한대로 움직이지 않으니, 최대한 어떻게 이상하게 사용할지에 대해 대비하는 부분을 추가해보고자 글을 작성한다.

 

 

 

로그인 없이 마이페이지에 들어간 사용자, 어떻게 대처하면 좋을까?

이런 당연히 빈틈있는 로직도 고민해보지 않으면 떠올려보지 못하는 답답한 마음을 알까?

나는 이런 생각을 부끄럽게도 이제야 하는 것 같다. 개발자는 코드만 작성하는 사람이 아닌 것도 말이다.

새삼 사용자의 편의성을 추구하는 개발자가 되고 싶다는 다짐이 얼마나 소박했는지를 비로소 안다.

하지만, 이러면서 성장해 가는 것!

어쩔 수 없다. 빠르지는 못하더라도 관심과 꾸준함이 있다면 빠른 것을 이길 수 있다고 생각하며...

 

누군가 로그인 없이 주소창에 마이페이지 주소를 입력해서 들어가려고 한다면!

당연히 로그인을 하도록 안내를 해야겠지~! 응, 바로 이것을 해결하는 것이다!

이런 것이 예외처리가 아닐까?

 

나의 경우에는 리액트 v6 이상이고, 리액트 프로젝트를 진행 중이니 SPA 스타일로 전환도 되면서 리액트를 사용하는 이유를 더 더하기 위해 useNavigate를 사용했다.

 

 

 

useNavigate 추가

function Mypage() {
  const [userInfo, setUserInfo] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    // 세션에 있는 userPkId를 사용해 사용자 정보를 가져오기
    fetch('http://localhost:5000/api/users/session', {
      method: 'GET',
      credentials: 'include',
    })
    .then((response) => response.json())
    .then((data) => {
      const userPkId = data.userPkId;

      // 사용자 정보를 서버에서 가져오기
      fetch(`http://localhost:5000/api/users/${userPkId}`)
        .then((res) => res.json())
        .then((user) => setUserInfo(user))
        .catch((error) => console.error('사용자 정보 불러오기 실패:', error));
    })
    .catch((error) => console.error('로그인 상태 확인 오류:', error));
  }, []);


    if (!userInfo) {
      alert("로그인 후 방문해 주세요!");
      navigate("/users/login");
      return;
    }

  console.log(userInfo);

  return (
    <div>
      <h2>내 정보</h2>
      <p>ID: {userInfo.users_name}</p>
      <p>가입일: {userInfo.created_at}</p>
    </div>
  );
}

 

 

 

문제점

• 재렌더링이 4번이 돼서 alert 창도 4번이나 뜬다.
• 로그인 후 mypage 버튼 클릭시 2번의 alert 후에 mypage로 이동이 된다.
• 유저의 정보가 뜨지 않는다. userInfo에 정보가 없음.

 

 

---

 

 

 

이 외 페이지 이동 방법

 

 window.location.href 

전체 페이지를 새로고침 하며 이동함

window.location.href = "/user/login";

 

 

 window.location.replace 

기존 페이지를 새로운 페이지로 변경함

새로고침도 함

window.location.replace("/user/login");

 

 

 history.push 

React Router v5 이하의 환경에서 사용함

SPA 스타일로 전환 가능

 

1. 불러오기:
import { useHistory } from "react-router-dom";

if (!userPkId) {
      alert("로그인 후 방문해 주세요!");
      
      2. 이동하고픈 페이지경로 작성하기:
      history.push("/user/login"); // 페이지 이동
    }