[TIL] 최종 프로젝트 (4)

오늘은 회원가입, 로그인 기능 구현 마무리 하고, 현재 로그인한 유저의 정보를 rtk로 전역 상태 관리를 할 수 있게끔 했다. 그리고 /user/[userId] 페이지 (유저페이지) 로 현재로그인 한 유저의 id 값으로 동적라우팅 하게끔 해두었는데, 유저페이지에서 해당 URL 파라미터 값인 userId를 useParams 또는 useRouter 과 같은 메서드로 받아올 때, 받아온 값을 콘솔에 찍어보았더니 콘솔에 두 번 찍히는데, 첫 번째는 undefiend가 뜨고, 두번째는 값을 정상적으로 읽어왔다.

import { useRouter } from 'next/router';
import React from 'react';

const UserPage = () => {
  const router = useRouter();
  const { userId } = router.query;
  console.log('userId', userId);
  return <div>UserPage</div>;
};

export default UserPage;

userId 값을 매개변수로 queryFn을 실행할 수도 있는데 undefined 를 매개변수로 넘겨주면 안되니까, userId 값을 받아왔을 때만 콘솔에 찍히게 하고 싶었다.

일단 undefined 가 뜨는 이유는 Next.js 에서 동적 라우팅을 사용할 때 페이지가 서버에서 렌더링될 때 URL의 매개변수 {router.query} 는 초기값으로 undefined 일 수 있기 때문이다. 이는 서버 측에서 페이지가 처음 렌더링될 때 해당 값이 없기 때문이다.

클라이언트 측에서 페이지에 이동할 때는 이미 URL이 변경되어 해당 매개변수가 존재하므로 router.query에서 정상적인 값이 반환된다.

처음에 undefined로 로그가 찍히는 이유는 서버 측 렌더링 시에 해당 페이지에 대한 초기 상태가 없어서다. 이후에 클라이언트에서 페이지로 이동하면서 브라우저에서 JavaScript가 활성화되면서 동적으로 변경된 URL에서 router.query의 값이 정상적으로 설정된다.

이러한 행동은 일반적으로 Next.js의 동적 라우팅에서 발생하는 것이며, 초기 서버 측 렌더링 시에 매개변수가 없는 상태에서 시작하는 경우에 발생한다.

방법 1. 클라이언트 측에서 추가 데이터 로딩

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { getUserDataById } from '../api/user'; // 예시: 사용자 데이터를 불러오는 API 함수

const UserProfilePage = () => {
  const router = useRouter();
  const { userId } = router.query;
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      if (userId) {
        const result = await getUserDataById(userId);
        setUserData(result);
      }
    };

    fetchData();
  }, [userId]);

  // userData를 이용한 페이지 렌더링
  return (
    <div>
      <h1>User Profile</h1>
      {/* ... */}
    </div>
  );
};

export default UserProfilePage;

useEffet 를 통해 사용자가 페이지를 클릭하거나 이동할 때 클라이언트 측에서 추가적인 데이터를 필요에 따라 로딩하는 방법이다.

방법 2. 초기 데이터 로딩

import { useRouter } from 'next/router';
import { getUserDataById } from '../api/user'; // 예시: 사용자 데이터를 불러오는 API 함수

const UserProfilePage = ({ userData }) => {
  // userData를 이용한 페이지 렌더링
  return (
    <div>
      <h1>User Profile</h1>
      {/* ... */}
    </div>
  );
};

export async function getServerSideProps(context) {
  const { userId } = context.params;
  
  // 예시: 사용자 데이터를 불러오는 함수
  const userData = await getUserDataById(userId);

  return {
    props: {
      userData,
    },
  };
}

export default UserProfilePage;

getServerSideProps 와 같은 함수를 사용하여 서버에서 초기에 데이터를 불러오고 페이지에 전달하는 방법이다.

나는 이중에 방법2를 선택해서 undefined 가 안 뜨도록 코드를 수정했다.

그러나.. 내일은 URL의 파라미터를 활용하지 않고, <Link> 태그 자체에서 마이페이지 버튼을 클릭했을 때 유저의 정보를 가지고 넘어갈 수 있도록 수정해볼 계획이다.
마이페이지에서 또 데이터를 fetch 하지 않고 이미 가지고 있는 유저 정보를 가지고 마이페이지로 이동해봐야겠다. 그러면 초기 로딩 속도도 훨씬 빨라지지 않을까 기대한다.