24.07.09 10:34 작성
·
96
0
interface IUseMoveToPageReturn {
onClickMoveToPage: (path: string) => () => void
}
export const useMoveToPage = (): IUseMoveToPageReturn => {
const router = useRouter()
const onClickMoveToPage = (path: string) => () => {
void router.push(path)
}
return {onClickMoveToPage}
}
위 처럼 작성 후
<button onClick={onClickMoveToPage("/markets")}>마켓 이동</button>
호출 할 수도 있지만
import { useRouter } from "next/router"
export const useMoveToPage = (path: string) => {
const router = useRouter()
return () => router.push(path)
}
보다 직관적으로 하면 인터페이스로 typescript 지정 안하고
<button onClick={useMoveToPage("/boards")}>게시판 이동</button>
호출해서 쓸 수 있지 않나요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
네, 말씀하신 방식대로 useMoveToPage
함수를 수정하여 사용하는 것은 더욱 직관적인 방식이 될 수 있습니다. 타입스크립트에서 인터페이스를 사용하지 않고 직접 함수를 정의하면 코드가 간결해지며 사용하기도 쉬워집니다. 하지만, 인터페이스를 사용하는 방식은 코드의 가독성과 재사용성을 높이며, 나중에 해당 함수를 다른 컴포넌트에서 사용할 때 예상 가능한 타입을 제공함으로써 오류를 줄일 수 있습니다. 따라서 어떤 방법을 사용할지는 프로젝트의 규모, 팀 내 코드 스타일 가이드, 재사용성 등을 고려하여 결정하는 것이 좋습니다.