🌱 𝐣𝐣𝐢𝐧𝐠𝐥𝐞 𝐝𝐞𝐕𝐥𝐨𝐠

client component에서 기존의 API와 소통하던 방식 useEffect useState -> metadata 사용 불가 로딩 state 구현 'use client'; import { useEffect, useState } from 'react'; /* useState의 사용으로 인해, 사용 불가능 export const metadata = { title: 'Home', }; */ export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); //useState -> interactive component를 사용하겠다. -> "use c..

서버 컴포넌트 vs 클라이언트 컴포넌트 처음 백엔드 서버에서 클라이언트 컴포넌트와 서버 컴포넌트가 모두 렌더링 클라인트 컴포넌트만 프론트엔드에서 다시 렌더링, 다시 hydrated(activate) 클라이언트 컴포넌트의 자바스크립트는 사용자가 다운로드하여 실행하고, 서버 컴포넌트의 자바스크립트는 사용자가 다운로드 X 서버 컴포넌트는 딱 한번만 서버에 의해 실행 -> 유저는 HTML 얻음 그 다음, 클라이언트 컴포넌트 hydrate -> 상호작용 가능 모든 이벤트 리스너 추가, useState, API, 지리 정보..etc 원하는 경우 클라이언트 컴포넌트를 서버 컴포넌트 내에 포함 가능 (반대의 경우 X) "use client"를 쓰지 않으면, 기본적으로 모두 서버 컴포넌트이다.