state를 사용하면 use client를 적어야하는데 이 때 api 호출을 하는 방법이 없을까요?

Question

next를 통해서 api 호출을 진행하는데 값이 필요해서 코드에 useState가 사용됩니다.그런데 useState를 서버 컴포넌트에서 사용 불가능하다며 use client를 사용하라고 오류가 나오더라구요.const [id, setId] = useState('id값') const db = await getDatabase(id);그렇다고 use client를 작성하면 async await에서 오류가 발생합니다.이런 경우엔 어떻게 해야할까요?useRouter도 사용 불가능한데 props단에서 작성해주는 방법을 찾아서 사용했는데 state는 검색을 해도 찾지를 못하겠습니다.

월급은나의빛 · Answer

useEffect 를 사용하면 되는데 next.js에선 권장하지 않는다고 하는군요.'use client' import { useState, useEffect } from 'react' export function Posts() { const [posts, setPosts] = useState(null) useEffect(() => { async function fetchPosts() { const res = await fetch('https://api.vercel.app/blog') const data = await res.json() setPosts(data) } fetchPosts() }, []) if (!posts) return

Loading...

return (

{post.title}

) } No async client component | Next.js

kimhwanhoon · Answer

그럼 데이터 받는 로직을 예전 리액트 사용하듯이 하세요 useEffect안에서요. 근데 next.js는 애초에 클라이언트 사이드에서 데이터 받을 이유가 없습니다. 상태관리도 서버에서면 쿠키나 헤더, 미들웨어나 url 파라미터로 하면 되니까요

내얼굴피콜로 · Answer

useEffect로 API를 호출하거나(next에서 권장하는 방법) useState를 사용하는 부분을 컴포넌트화를 해서 자식 컴포넌트에서 상태를 관리하도록 하고 api를 호출 하는 부모 컴포넌트는 완전하게 서버 컴포넌트로 만드는게 방법일꺼 같습니다!

soop · Answer

use client 에서 받으시려면 useEffect 나 react-query 를 사용하시면 됩니다.

state를 사용하면 use client를 적어야하는데 이 때 api 호출을 하는 방법이 없을까요?

4개의 답변

Q&A 목록