next.js url 파라미터 변경 시 데이터 호출

Next.js에서 데이터 호출을 관리하는 데는 여러 가지 방법이 있습니다. useEffect와 함께 비동기 작업을 수행하려면, async 함수를 직접 사용하는 대신 Promise를 반환하는 함수를 만드는 방식으로 처리해야 합니다. 다음은 URL의 쿼리 문자열을 감시하고 변경될 때마다 데이터를 다시 가져오는 Next.js 컴포넌트의 예입니다: ```jsx import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; export default function Page() { const [data, setData] = useState(null); const router = useRouter(); useEffect(() => { const fetchData = async () => { // Assuming you want to fetch with the 'id' query parameter const id = router.query.id; if (id) { const response = await fetch(`/api/data?id=${id}`); const data = await response.json(); setData(data); } }; fetchData(); }, [router.query]); // Re-run effect when URL query parameters change // ... render your component using the 'data' } ``` 여기서 우리는 `useEffect` 와 `fetchData` 비동기 함수가 함께 사용되어 있습니다. React hook 내에서 직접적으로 async-await 체인을 사용할수 없어서 이 패턴을 사용합니다. 데이터가 로드되기 전에 컴포넌트 렌더링 처리와 함께 응답이 NULL이 아닌 경우에만 렌더링 되도록 주의해야 합니다. 또한, Next.js에서는 각 페이지의 `getServerSideProps`나 `getStaticProps` 함수를 사용하여 서버 측 렌더링(SSR) 또는 정적 생성 시 데이터를 사전에 로드할 수 있습니다. 이 방법은 클라이언트 사이드에서 API 요청을 할 필요 없이 데이터가 이미 페이지에 포함되어 있게 해줍니다. 하지만 이 경우에는 URL 쿼리 변경에 따라 동적으로 데이터를 다시 가져오지 못합니다.