[Next] usepathname으로 조건부 데이터 처리 적용하는 법 (Conditional Logic)

🚩 소개

안녕하세요! 대학생 개발자 주이어입니다!

오늘 소개드릴 내용은 하나의 컴포넌트를 여러 페이지에서 다르게 처리하는 방법에 대해서 정리해보려고 합니다.

 

보통 이런 방법은 props나 context 기반으로 구현하는 경우가 많은데,

제가 이번에 구현할 방법은 path-based 즉, 경로 기반으로 구현해보려고 합니다.

 

이 방법을 사용하게 된 이유는, 현재 진행 중인 프로젝트에서 UI는 거의 동일하지만, 데이터 처리와 같이 기능적인 부분이 조금씩 다른 경우가 있었기 때문입니다. 그래서 "새로운 컴포넌트를 굳이 만들지 않고, 기존 컴포넌트를 재사용할 수는 없을까?" 라는 생각이 들어 이 방법을 도입하게 되었습니다.

---

🔗 path-based

import { useRouter, usePathname } from "next/navigation"; 

const pathname = usePathname();

먼저 경로 기반으로 제작을 해야하니, 현재 경로에 대한 정보를 확인할 수 있는 usePathname부터 가져와 줍니다.

usePathname 훅을 호출해 현재 경로를 pathname 변수에 할당해 주었습니다.

if (!pathname.startsWith("/myschedule"))

pathname을 사용하면 위와 같이 현재 경로에 대한 조건식을 만들 수 있습니다.

startsWith를 꼭 사용해야 할 필요는 없지만, 하위 경로나 추가 파라미터가 붙을 가능성을 고려해 사용해 주었습니다.

(/myschedule/info 와 같이 하위 경로 가능성 고려)

if (!pathname.startsWith("/myschedule")) {
    try {
      // myschedule일 경우의 데이터 처리
    } catch (err) {
      // 오류 처리
    }
} else {
    try {
      // 아닐 경우의 데이터 처리
    } catch (err) {
      // 오류 처리
    }
}

이제 위와 같이 경로 기반의 조건부 데이터 처리를 할 수 있게 됩니다.

현재 경로가 /myschedule일 경우와 아닐 경우를 나눠서 데이터 처리를 할 수 있게 되는거죠.

 

이렇게 하는 이유는 아래와 같이 3가지 정도가 있는 것 같습니다.

• 컴포넌트 재사용성 증가
  하나의 컴포넌트 내에서 경로에 따라 데이터 처리 방식을 다르게 함으로써, 여러 페이지에서 동일한 컴포넌트를 재사용할 수 있고 이로 인해 코드 중복을 줄일 수 있게 됩니다.
• 유지보수 용이
  데이터 처리 로직을 한 곳에서 확인할 수 있어서 유지보수가 편리하고, 경로별 분기 처리가 명확해 가독성이 좋아집니다.
• 데이터 처리 효율 증가
  경로별로 맞춤형 데이터를 불러오므로 불필요한 API나 컴포넌트 호출을 줄일 수 있게 됩니다.

제가 생각하는 가장 큰 이유는 아마 컴포넌트의 재사용성 증가이지 않을까 생각합니다.

컴포넌트 재사용성이 증가할 수록 가독성, 효율, 유지보수 등이 크게 증가하기 때문입니다.

---

😊  마무리

지금까지 usePathname을 사용하여 경로 기반으로 데이터를 다르게 처리하는 방법에 대해서 간단하게 정리해보았습니다.

 

보통은 쿼리스트링, 파라미터, props 등으로 조건부 처리하는 경우가 많은데,

저처럼 path 기준으로 조건부를 처리할 경우를 위해 이렇게 글을 적어보았습니다.

 

많은 분들에게 도움이 되었으면 좋겠고, 지금까지 읽어주셔서 감사드립니다!

다음에는 더 좋은 글로 찾아오도록 하겠습니다!

 

💬 함께 공부하고 싶은 내용이 있다면 댓글이나 피드백으로 알려주세요!

[Next] v15 useSearchParams without Suspense 오류 해결

[Next] v15 useSearchParams without Suspense 오류 해결

이전 글 읽으러 가기!

 

https://discord.gg/8Hh8WgM4zp

KYT CODING COMMUNITY Discord 서버에 가입하세요!

KYT CODING COMMUNITY 가입하기!