조건부 렌더링 해부

핵심 개념

React에서 조건부 렌더링은 && 연산자, 삼항 연산자, if문으로 구현합니다. truthy/falsy 값에 따라 컴포넌트를 표시하거나 숨깁니다. null을 반환하면 컴포넌트가 렌더링되지 않습니다. 조건문을 지우며 UI 분기가 어떻게 사라지는지 확인하십시오.

코드 분석

REACT📋 코드 (32줄)







const { useState } = React;

  function UnitStatus({ threat }) {
    if (threat === 0) return null;
    return (
      <div style={{color: threat >= 9 ? '#10b981' : threat >= 7 ? '#f59e0b' : '#22c55e', marginBottom:'4px'}}>
        {threat >= 9 ? '⚠ CRITICAL' : threat >= 7 ? '! WARNING' : '✓ SAFE'} — 위협도: {threat}
      </div>
    );
  }

  function App() {
    const [active, setActive] = useState(true);
    const [threat, setThreat] = useState(8);
    return (
      <div>
        <button onClick={() => setActive(a => !a)} style={{background:'#333', color:'#e8e8e8', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace', marginBottom:'12px'}}>
          {active ? 'DEACTIVATE' : 'ACTIVATE'}
        </button>
        {active && <UnitStatus threat={threat} />}
        {active ? <div style={{color:'#22c55e', fontSize:'12px'}}>SYSTEM ONLINE</div> : <div style={{color:'#10b981', fontSize:'12px'}}>SYSTEM OFFLINE</div>}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 React '조건부 렌더링' 컴포넌트에서
불필요한 리렌더링·메모리 누수·의존성 배열 누락을 찾고
최적화 코드로 리팩토링해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'조건부 렌더링'를 사용한 실전 컴포넌트를
TypeScript + Tailwind 포함 완성 코드로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 React '조건부 렌더링' 사용 패턴 전체를 분석하고
번들 크기·렌더링 횟수·Core Web Vitals 개선 방안을
우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

React '조건부 렌더링' vs 다른 프레임워크(Vue/Svelte/Solid)의
동일 기능 구현 방식을 솔직하게 비교하고
2026년 트렌드를 알려줘.

⭐ 이것만 기억하세요

조건부 렌더링 해부는 이 3가지만 확실히 잡으세요

1.조건 분기 없이 모든 UI를 항상 렌더링하면 로딩 중인데 빈 데이터가 보이거나, 권한 없는 화면이 노출됩니다

2.삼항 연산자, &&, early return 세 패턴으로 조건에 따라 컴포넌트나 JSX 블록을 선택적으로 렌더링합니다

3.다음 챕터에서 배열 데이터를 반복해서 UI로 변환하는 리스트 렌더링과 Key를 배웁니다

💬 이 챕터 질문 보기

REACT · CH.13 — 질문하거나 답변을 확인하세요

→

진행도 13 / 34

← 커리큘럼으로 ← 목록으로 (React)