8강. 조건부 렌더링

?1. 이번 강의에서 해결할 문제

검색 결과가 없거나 필터가 적용됐을 때 같은 화면만 보여 주면 사용자는 현재 상황을 이해하기 어렵습니다. 상태에 따라 필요한 UI만 표시합니다.

✓2. 학습 목표

• if, 삼항 연산자, 논리 AND로 UI를 선택한다.
• 빈 결과와 활성 필터 상태를 구분해 표시한다.
• 조건이 복잡해질 때 읽기 쉬운 표현을 선택한다.

◇3. 핵심 개념

React의 조건부 렌더링은 JavaScript 조건식으로 반환할 JSX를 고르는 것입니다. 완전히 다른 화면은 조기 반환이나 if, 두 선택지 중 하나는 삼항 연산자, 조건이 참일 때만 추가할 요소는 &&가 읽기 쉽습니다.

숫자 값에 &&를 쓸 때 0이 화면에 출력될 수 있으므로 명시적인 비교식을 사용합니다.

</>4. 단계별 코드 예시

검색 상태를 App으로 옮기고 결과 메시지를 만듭니다.

파일 경로: game-release-dashboard/src/App.tsx

import { useState } from 'react';
import { GameCard } from './components/GameCard';

function App() {
  const [query, setQuery] = useState('');
  const gameTitle = 'Star Harbor';
  const matches = gameTitle.toLowerCase().includes(query.toLowerCase());

  return (
    <main>
      <label htmlFor="game-search">게임 검색</label>
      <input
        id="game-search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />

      {query.length > 0 && <p>“{query}” 검색 결과</p>}

      {matches ? (
        <GameCard
          title={gameTitle}
          releaseDate="2026-09-18"
          platform="PC"
        />
      ) : (
        <p role="status">조건에 맞는 게임이 없습니다.</p>
      )}
    </main>
  );
}

export default App;

→5. 코드가 동작하는 이유

state가 바뀔 때마다 matches가 현재 query로 다시 계산됩니다. 검색어가 있을 때만 첫 안내가 추가되고, 삼항 연산자가 카드와 빈 결과 메시지 중 정확히 하나를 선택합니다. 파생 가능한 matches를 별도 state로 저장하지 않아 서로 어긋날 가능성도 줄였습니다.

!6. 자주 하는 실수와 해결법

• 파생값을 또 state로 저장: query로 계산할 수 있는 값은 렌더링 중 계산합니다.
• 중첩 삼항 연산자 남용: 조건이 세 단계 이상이면 변수, 함수, 조기 반환으로 분리합니다.
• {items.length && ...} 사용: 0이 출력될 수 있으므로 items.length > 0을 사용합니다.
• 빈 결과를 아무것도 표시하지 않음: 사용자가 로딩인지 오류인지 구분할 수 있는 메시지를 제공합니다.

✎7. 직접 실습

검색어가 비어 있으면 “전체 게임을 표시합니다”, 검색 결과가 있으면 카드, 없으면 빈 결과 메시지가 나오도록 세 상태를 구현하세요.

?8. 이해 점검 질문 3개

1. 조기 반환과 삼항 연산자는 각각 어떤 조건에 적합한가요?
2. matches를 state로 저장하지 않은 이유는 무엇인가요?
3. 논리 AND 앞에 숫자를 그대로 두면 어떤 문제가 생길 수 있나요?

■9. 핵심 요약

조건부 렌더링은 현재 상태에 맞는 UI를 선택합니다. 파생값은 가능한 한 기존 state에서 계산하고, 사용자에게 빈 상태의 의미를 분명히 알려 줍니다.