ReactJS 디자인 패턴 ~Guard Clause Rendering~

Source: Dev.to

개요

이 패턴은 컴포넌트의 render 함수 시작 부분에서 조기 반환문을 사용하여 엣지 케이스, 로딩 상태 또는 잘못된 데이터를 처리합니다. 이러한 조건에 대해 조기에 반환함으로써 메인 JSX 반환문이 깔끔하고 평탄하게 유지되어 가독성과 유지보수성이 향상됩니다.

예시

import { useState } from "react";

function Loading() {
  return 
Loading...
;
}

function Error() {
  return 
Error!
;
}

function UserProfile({ loading, error, user }) {
  if (loading) return ;

  if (error) return ;

  return (
    
      
## {user.name}

      
{user.email}

      
{user.role}

    
  );
}

function App() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const user = {
    name: "John Doe",
    email: "Sample@example.com",
    role: "Software Developer",
  };

  return (
    
       setLoading(!loading)}>Toggle Loading
       setError(!error)}>Toggle Error

      
    
  );
}

export default App;