인프런에서 코드 캠프인강을 들으면서 최근에 Next js를 공부를 다시 시작하고있다.
해당 강의에서는 graphql을 사용하는데, rest api으로도 실습을 하고싶어서 간단하게 express를 사용해서 백엔드 서버를 구축하였다.
간단한 게시판을 만들고 있는데, 글의 detail 페이지를 만드는데, data를 가져오는 과정에서 문제를 겪었다.
일단 먼저 프론트에서는 pages/boards/new/[boardId] BoardDetailPage 컴포넌트가 있고,
백엔드에서 /api/posts/1, /api/posts/2, /api/posts/:id와 같은 board의 정보를 담고있는 api가 있다.
useRotuer의 router.query를 사용하여, pages/boards/new/[boardId]에서 boardId를 가져왔다.
그러고 난후에, boardId값을 백엔드 페이지에 요청했는데 계속 id값을 못불러와서 전달이 안되어 백엔드에서 호출이 안되었다.
문제 코드
export default function BoardDetail() {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { boardId } = router.query;
useEffect(() => {
(async () => {
setIsLoading(true);
try {
const board = await getBoardById(boardId);
setData(board);
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
})();
}, []);
return (
<>
<BoardDetailUI data={data} isLoading={isLoading} />
</>
);
}
알고보니 useEffect의 배열에 값에 boardId값을 전달안해주어서 발생한 것으로, boardId 값을 넣어주니 렌더링이 된다는 것을 확인했다.
수정된 코드
export default function BoardDetail() {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { boardId } = router.query;
useEffect(() => {
if (!boardId) {
return;
}
(async () => {
setIsLoading(true);
try {
const board = await getBoardById(boardId);
setData(board);
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
})();
}, [boardId]); // 추가
return (
<>
<BoardDetailUI data={data} isLoading={isLoading} />
</>
);
}
참고 URL
https://github.com/vercel/next.js/discussions/11484
