Today 요약

1. 새로운 프로젝트

1. What I Learned?

새로운 프로젝트

Next에서 useRouter 사용

이번에 진행하는 프로젝트는 쇼핑몰 관련 프로젝트다. 내가 이번에 맡게된 부분은 로그인, 회원가입과 마이페이지를 담당하게 되었다. 일단은 로그인, 회원가입 UI를 간단하게 만들고 api로 통신해서 구현하고 유효성 검사도 적절하게 하나씩 추가해나가는 방식으로 하나씩 시도해보려고 했다.

그래서 오늘은 회원가입, 로그인 UI를 만들고 버튼을 클릭했을 때 각 상황에 맡게 네비게이션 되는 부분까지 완료하려고 했다.

이번 css 라이브러리는 tailwind로 진행했다. 크게 어려운 점은 없었지만, 중복되는 코드를 작성할 때 조금 코드가 지저분해지는 경향이 있는 것 같다.

물론 global.css에 선언하는 방법이 있지만, 일단은 협업으로 진행하는 거니까 global.css는 일단 최대한 안 건드리고 시작하려고 한다.

그렇게 UI는 문제 없이 잘 구현했는데, 이번에 Next로 진행하다보니까 기존에 리액트에서는 네비게이션을 useNavigate로 호출해서 사용했는데, Next는 useRouter를 사용하는 것 같았다. 하지만 Next 13버전에서 클라이언트 컴포넌트와 서버 컴포넌트로 나뉘고 나서는 Next 버전에 따라 다른 걸 import 해와야 하는 상황이다.

처음에는 단순히 로직을 클라이언트 컴포넌트로 분리하고 사용하면 될 줄 알았는데 그게 문제가 아니였다. 클라이언트 컴포넌트로 useRouter 로직을 분리하고 나서도 안되길래 공식문서를 찾아봤더니,

import { useRouter } from 'next/router

next/router에서가 아니라 next/navigation 에서 import를 해서 사용해야 되는 거였다..

역시 공식문서를 먼저 찾아봤어야 했는데;;

아무튼 아래와 같이 변경하고 공통적인 버튼 컴포넌트를 만들면서 클라이언트 컴포넌트에서 동작할 로직을 구현해서 해결했다.

import { useRouter } from 'next/navigation'

'use client'

import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'

type ButtonProps = {
  type?: 'submit' | 'reset' | 'button' | undefined
  className?: string
  text: string
}

const AuthButton = ({
  type = 'submit',
  className = 'w-full p-2 mt-4 rounded-sm bg-blue-500 text-white',
  text
}: ButtonProps) => {
  const router = useRouter()
  const [pathName, setPathName] = useState('')

  useEffect(() => {
    setPathName(window.location.pathname)
  }, [pathName])

  const goToThePage = () => {
    if (router) {
      if (pathName === '/register') {
        router.push('/login')
      } else {
        text === '로그인' ? router.push('/') : router.push('/register')
      }
    }
  }

  return (
    <button type={type} className={className} onClick={goToThePage}>
      {text}
    </button>
  )
}

export default AuthButton