🎭 조건부 렌더링 지옥: 복잡한 삼항 연산자와 && 남발, 가독성 및 유지보수성 저하

Why Wrong?

How to Fix?

function MyComponent({ isLoading, data, error, isAdmin }) {
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : data ? (
        isAdmin ? (
          <div>
            <h1>Welcome Admin</h1>
            <p>Data: {data.value}</p>
            <button>Edit</button>
          </div>
        ) : (
          <div>
            <h1>Welcome User</h1>
            <p>Data: {data.value}</p>
          </div>
        )
      ) : (
        <p>No data available.</p>
      )}
    </div>
  );
}

// 컴포넌트 분리
function Loading() {
  return <p>Loading...</p>;
}

function ErrorMessage({ error }) {
  return <p>Error: {error.message}</p>;
}

function AdminView({ data }) {
  return (
    <div>
      <h1>Welcome Admin</h1>
      <p>Data: {data.value}</p>
      <button>Edit</button>
    </div>
  );
}

function UserView({ data }) {
  return (
    <div>
      <h1>Welcome User</h1>
      <p>Data: {data.value}</p>
    </div>
  );
}

function NoData() {
    return <p>No data available.</p>
}

function MyComponent({ isLoading, data, error, isAdmin }) {
  if (isLoading) {
    return <Loading />;
  }

  if (error) {
    return <ErrorMessage error={error} />;
  }

  if (!data) {
    return <NoData />
  }

  return isAdmin ? <AdminView data={data} /> : <UserView data={data} />;
}