반응형
Next.js의 useEffect hook에서 router.query 값을 받는 방법
안녕하세요, 개발하며 달리는 쿼카입니다.
이번 글에서는 Next.js의 useEffect hook에서 router.query 값을 받는 방법에 대해 알아보려하는데요, 저도 router.query에 따라 필요한 데이터를 가져오는 코드를 짜다가 해당 문제를 겪어서 해결책을 적어보고자합니다. 일반적으로 생각하는 router.query의 값이 useEffect에서 바로 보장될 거라 생각하지만, 보장이 되지 않습니다. 그럼 어떻게 해결할까요? 바로 router 객체의 isReady 값을 이용합니다.
해결책
const router = useRouter();
useEffect(()=>{
if(!router.isReady) return;
// codes using router.query
}, [router.isReady]);
router.isReady를 useEffect hook의 dependency로 넣게 되면 초기 false 값에서 true가 되는 순간 query를 포함한 router 객체가 가져와야하는 값을 다 가져오게 됩니다!
지금까지 Next.js의 useEffect hook에서 router.query 값을 받는 방법에 대해 알아보았는데요, 도움이 되셨을까요? 도움이 되셨다면 좋아요와 댓글 한 번 부탁드립니다.
좋은 하루되세요~!
반응형