React Pattern Cheatsheet

Overview

React에서 반복해서 다시 찾게 되는 조건부 렌더링, 리스트 렌더링, 로딩/에러 분기 패턴을 짧게 모아둔 문서다.

Common Patterns

1) 삼항 연산자로 조건부 렌더링

• 목적: 상태에 따라 다른 UI 표시
• 예제:

return error ? (
  <div>Error</div>
) : loading ? (
  <div>Loading...</div>
) : (
  <div>{result}</div>
);

• 메모:
  • 분기가 길어지면 JSX가 급격히 읽기 어려워진다.
  • 경우가 많아지면 함수로 분리하거나 if 블록으로 위에서 return 하는 편이 낫다.

2) if로 조기 반환

• 목적: 로딩, 에러, 정상 상태를 더 읽기 쉽게 분리
• 예제:

if (error) return <div>Error</div>;
if (loading) return <div>Loading...</div>;

return <div>{result}</div>;

• 메모:
  • 간단한 조건은 삼항 연산자로, 화면 상태 분기는 조기 반환으로 처리하면 보통 더 읽기 쉽다.

3) 배열 map()으로 리스트 렌더링

• 목적: 배열 데이터를 컴포넌트 리스트로 출력
• 예제:

return (
  <>
    {items.map((item) => (
      <div key={item.id}>
        <span>{item.name}</span>
      </div>
    ))}
  </>
);

• 메모:
  • 최상위 요소에는 중복되지 않는 key가 필요하다.
  • 가능하면 index보다 실제 데이터 ID를 key로 쓰는 편이 안전하다.

4) 빈 배열 처리

• 목적: 리스트가 비었을 때 대체 UI 표시
• 예제:

return items.length === 0 ? (
  <div>No items</div>
) : (
  <>
    {items.map((item) => (
      <div key={item.id}>{item.name}</div>
    ))}
  </>
);

5) 조건부로 일부만 표시

• 목적: 특정 조건을 만족하는 항목만 렌더링
• 예제:

return (
  <>
    {items
      .filter((item) => item.visible)
      .map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
  </>
);