🦴

커스텀 훅 사용방법

useModal

주의 : 아직 onSubmit 에 대한 서버 작업이 안되어 있어서 모달 컴포넌트 안에서 주석 처리되어 있습니다.

useModal 훅에서 openModal 함수를 불러옵니다. (객체 구조분해 할당)

모달을 여는 버튼의 onClick 이벤트에 openModal 함수를 연결합니다.

openModal함수에 모달의 내용을 전달합니다.

// 모달에 들어갈 내용
{
  title: string // 모달 제목
  description: string // 모달 제목 밑 설명
  placeholder: string // input의 placeholder
  submitButton: string // 제출(submit) 버튼 이름
  onSubmit: (input: string) => void // 제출(submit) 버튼 클릭하여 실행할 동작
 },
TypeScript
복사

모달 컴포넌트를 불러옵니다.

모달 컴포넌트의 타입을 지정합니다. 

type=’’ 에 마우스를 올리면 선택할 수 있는 타입을 볼 수 있습니다.

type Modalprops = {
	type: 'invite' | 'create-planner'
}
TypeScript
복사

// 친구 초대 모달 사용 예시

import Modal from '../components/Common/Modal/Modal'
import useModal from '../hooks/useModal'

const InviteModalObj = {
  title: '친구초대',
  description: '여행을 함께할 친구를 초대해보세요',
  placeholder: '친구의 이메일을 입력하세요',
  submitButton: '초대',
  onSubmit: (input: string) => {
    console.log(input, '친구 초대 api request')
  },
}

function Home() {
  const { openModal } = useModal()
  return (
    <div>
      <button type='button' onClick={() => openModal(InviteModalObj)}>
        친구 초대 버튼
      </button>
      <Modal type='invite' />
    </div>
  )
}

export default Home
TypeScript
복사

// 플래너 추가 모달 사용 예시
import Modal from '../components/Common/Modal/Modal'
import useModal from '../hooks/useModal'

const createPlannerModalObj = {
  title: '여행 추가하기',
  description: '여행의 이름을 입력하세요',
  placeholder: '여행 이름',
  submitButton: '확인',
  onSubmit: (input: string) => {
    console.log(input, 'planner 추가 api request')
  },
}

function Home() {
  const { openModal } = useModal()
  return (
    <div>
      <button type='button' onClick={() => openModal(createPlannerModalObj)}>
        여행 추가하기 버튼
      </button>
      <Modal type='create-planner' />
    </div>
  )
}

export default Home
TypeScript
복사

useLogout

사용하려는 컴포넌트에서 useLogout 훅을 원하는 변수명으로 불러옵니다.

사용하려는 버튼의 onClick 이벤트에 해당 변수를 연결합니다. 

import useLogout from '../../../hooks/useLogout'


function LogoutBtn() {
  const logout = useLogout()

  return (
    <button type='button' className={styles.logout} onClick={logout}>
      <span>logout</span>
    </button>
  )
}

export default LogoutBtn
TypeScript
복사

useRouter

페이지 이동

useRouter 훅에서 routeTo 함수를 불러옵니다. (객체 구조분해 할당)

이동하려는 페이지의 path 를 routTo 함수의 매개 변수로 넘겨줍니다.

path 는 /router/routerData.tsx  에서 확인 가능합니다.

import useRouter from './useRouter'

function SignUp() {
  const { routeTo } = useRouter()

	const submitSignUp = (data: FormValueType) => {
    signUp(data).then(res => {
      const { status, data }: { status: number; data: { message: string } } = res!
      if (status === 200) {
        routeTo('/user/login')
      } else {
        alert('회원가입에 실패했습니다. 잠시 후 다시 시도해주세요')
      }
    })
  }
	

	return <button type='submit' onClick={submitSignUp}>회원가입</button>
}

export default SignUp
TypeScript
복사

현재 url의 pathname 가져오기

useRouter 훅에서 pathname 을 불러와 바로 사용할 수 있습니다. (객체 구조분해 할당)

import useRouter from '../hooks/useRouter'

function SignIn() {
  const { pathname } = useRouter()

	console.log('로그인 페이지의 pathname:', pathname) // 로그인 페이지의 pathname: /user/login
	

	return <SignInView />
}

export default SignIn
TypeScript
복사

Params 가져오기

import useRouter from '../hooks/useRouter'

function PlanDetail() {
	const { params } = useRouter()
	const { planId } = params
	
	return ...
}

export default PlanDetail
JavaScript
복사