• 목록
• 게시판 리스트 옵션
  • 검색

✅ 조건이 여러 개일 때 if보다 early return이 깔끔하다

JSX 조건 분기, 중첩 없이 쓰는 패턴

컴포넌트 내부 조건이 많아지면 이런 코드가 생긴다:

if (loading) {
  return <Loading />;
} else {
  if (!data) {
    return <Empty />;
  } else {
    return <DataView data={data} />;
  }
}

중첩이 깊어질수록 가독성 최악
→ 유지보수도 힘들어짐

✅ 해결: early return 패턴

if (loading) return <Loading />;
if (!data) return <Empty />;

return <DataView data={data} />;

• 불필요한 중첩 제거

• 조건 흐름이 위에서 아래로 자연스럽게 읽힘

• 예외 케이스부터 먼저 정리하는 방식

✔️ 복잡한 분기일수록
중첩을 줄이고 일찍 빠져나오는 코드가 깔끔하다.