next.js : 서버 컴포넌트에서 클라이언트 컴포넌트 분리

update하기 위해서는 해당 id를 알아야함 => useParams 를 사용해야함 (client 컴포넌트 훅임) --> 서버 컴포넌트에서는 사용 불가능 => 클라이언트 컴포넌트로 변경할 수 있지만, 그렇게 되면 서버 컴포넌트의 장점을 잃어버림 (가능한 서버 컴포넌트 위주로 사용하기!) ==> 특정 부분만 클라이언트 컴포넌트화 시키기! [layout.js] (변경 전) Create Update (변경 후) function Control() { return ( Create Update ); } export default async function RootLayout({ children }) { {children} ▶ 컴포넌트화 시키기 [layout.js] import { Control } from './C..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms

Next.js : 데이터 조회 (서버 컴포넌트) & 새글 작성( 클라이언트 컴포넌트) + 캐시

1. 읽기 (READ) : 서버 컴포넌트 read 폴더 > [id] 폴더 > [page.js] (1) 여기는 데이터를 읽어서 출력할 뿐! 사용자와 상호 작용 x => server 컴포넌트 이용! (2) 데이터를 가져올 때는 async + await로 변경 export default async function Read(props) { const response = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await response.json(); return ( Read {topic.body} ); } 2. 오류 해결 (.next 파일 삭제 후 재실행) ▶ 해결 (1) dev 서버 재실행 : npm run de..

• format_list_bulleted Next.js
• · 2023. 12. 20.
• textsms