Client-side Rendering (UserProfile)

#5RenderingEasy

Client-side Rendering (UserProfile)

Client-side Rendering - UserProfile

CSR 방식으로 사용자 정보를 가져오는 <UserProfile /> 컴포넌트를 구현하세요. 마운트 시점에 useEffect로 비동기 데이터 페칭을 시작하고, 로딩 / 에러 / 데이터 세 가지 상태를 화면에 표시합니다.

시그니처

type User = { id: string; name: string };

function UserProfile(props: {
  userId: string;
  fetchUser: (id: string) => Promise<User>;
}): JSX.Element;

동작

마운트하면 fetchUser(userId) 를 호출
호출 중에는 <div role="status">Loading...</div> 표시
성공하면 data-testid="name" 에 user.name을 렌더
실패하면 <div role="alert">에러가 발생했습니다</div> 표시
userId 가 바뀌면 다시 페칭한다

학습 포인트

useState 3개(data, loading, error) 또는 discriminated union으로 상태 모델링
useEffect 의존성 배열로 userId 변경 추적
비동기 작업의 cleanup (선택): unmount 후 setState 방지
CSR의 전형적인 흐름: 빈 화면 → 로딩 → 데이터

import { useEffect, useState } from 'react';

export type User = { id: string; name: string };

export function UserProfile({
  userId,
  fetchUser,
}: {
  userId: string;
  fetchUser: (id: string) => Promise<User>;
}) {
  // TODO: data, loading, error 상태를 useState로 만드세요
  // TODO: useEffect에서 userId가 바뀔 때마다 fetchUser(userId) 호출
  //       - 시작 시 loading=true, error=null
  //       - 성공 시 data 저장, loading=false
  //       - 실패 시 error 저장, loading=false
  // TODO: loading이면 <div role="status">Loading...</div>
  //       error면 <div role="alert">에러가 발생했습니다</div>
  //       data가 있으면 <div data-testid="name">{data.name}</div>
  return null;
}

Open Sandbox

Sandpack 로드 중…

import { useEffect, useState } from 'react';

export type User = { id: string; name: string };

export function UserProfile({
  userId,
  fetchUser,
}: {
  userId: string;
  fetchUser: (id: string) => Promise<User>;
}) {
  // TODO: data, loading, error 상태를 useState로 만드세요
  // TODO: useEffect에서 userId가 바뀔 때마다 fetchUser(userId) 호출
  //       - 시작 시 loading=true, error=null
  //       - 성공 시 data 저장, loading=false
  //       - 실패 시 error 저장, loading=false
  // TODO: loading이면 <div role="status">Loading...</div>
  //       error면 <div role="alert">에러가 발생했습니다</div>
  //       data가 있으면 <div data-testid="name">{data.name}</div>
  return null;
}

Open Sandbox