how useRouter works

how it works

1. 어떤 컴포넌트 내부에서 useRouter 훅을 사용하면, 그 컴포넌트는 두 번 렌더링 된다.
2. 컴포넌트 함수가 JSX 코드를 첫번째로 렌더링 한 뒤에, useRouter를 실행시키기 때문이다.
3. 따라서 컴포넌트가 첫번째로 렌더링 되는 시점에서는 router 데이터에 접근할 수 없는 상태이다. 

example 

export default function EventSlugPage() {
  const router = useRouter()
  const { slug } = router.query
  console.log(slug)
  if (!slug) return <p>loading...</p>

  const [selectedYear, selectedMonth] = slug
  const eventList = getEventsByDate({
    month: selectedMonth,
    year: selectedYear,
  })

  return <EventList eventlist={eventList} />
}

 

1. event slug 페이지는 /events/2021/3과 같이 연도, 월에 맞는 데이터만 필터링해서 보여주는 페이지이다. 
2. 페이지를 새로고침하면, 처음에는 콘솔에 undefined이 출력되고, 두번째가 되어서야 url의 segment 배열이 출력되는 것을 확인할 수 있다. 
3. 따라서 slug가 존재하지 않을 때 실행할 코드를 조건문으로 분기 처리해 주지 않으면, slug를 destructuring 하는 코드에서 에러가 발생할 것이다(that's because undefined is not iterable). 
4. router.push(...)를 이용해 event slug 페이지에 접근한 경우에는 이미 router 데이터가 존재하는 상태이기 때문에, 컴포넌트가 한 번만 렌더링 된다.