Client Side | Notion

{isLoading ? "Loading..." : JSON.stringify(movies)} ) }"> {isLoading ? "Loading..." : JSON.stringify(movies)} ) }"> {isLoading ? "Loading..." : JSON.stringify(movies)} ) }">

export default function Page() {
    const [isLoading, setIsLoading] = useState(true);
    const [movies, setMovies] = useState([]);
    useEffect(() => {
        const getMovies = async () => {
            const response = await fetch("<https://nomad-movies.nomadcoders.workers.dev/movies>");
            const json = await response.json();
            setMovies(json);
            setIsLoading(false);
        }
        getMovies()
    }, []);
    return (
        <div>
            {isLoading ? "Loading..." : JSON.stringify(movies)}
        </div>
    )
}

상태 관리:
- useState를 사용하여 데이터를 저장할 상태와 로딩 상태를 관리한다
- 초기 데이터 상태는 빈 배열로 설정하고, 로딩 상태는 true로 시작한다
데이터 Fetching:
- useEffect를 활용하여 컴포넌트가 처음 렌더링될 때 fetch 함수를 호출
- fetch는 비동기 함수(async)로 작성되며, API URL에서 데이터를 가져와 JSON으로 변환한 후 상태를 업데이트
로딩 상태 처리:
- 데이터를 가져오는 동안 사용자에게 "Loading..." 메시지를 표시한다
- 데이터가 로드되면 로딩 메시지를 숨기고 데이터를 화면에 표시=
클라이언트와 서버 컴포넌트:
- fetch는 클라이언트 측에서 실행되므로 브라우저에서 API 요청 수행된다
- 클라이언트 컴포넌트에서는 메타데이터를 export할 수 없으며, API 키와 같은 민감한 정보를 노출하게 된다
- 서버 컴포넌트를 사용하면 useEffect, useState, 로딩 상태 등을 직접 관리할 필요 없이 프레임워크가 이를 처리 해준다
보안 고려사항:
- 클라이언트에서 직접 데이터베이스와 통신하면 보안 위험이 발생하므로, 항상 API를 중간에 두어 안전하게 통신하도록 해야한다
- API는 데이터베이스와 통신하며, 프론트엔드 애플리케이션은 API를 통해 데이터를 주고받는다
최신 프레임워크 사용:
- 최신 Next.js와 서버 컴포넌트를 사용하면 API 없이도 서버에서 직접 데이터를 fetch할 수 있어 더 효율적이고 안전한 데이터 관리를 할 수 있음(Server Side 페이지에서 확인해볼 것)