React 기초 04 · Conditional

조건부 렌더링 - 상황 따라 다른 화면

조건에 따라 다른 걸 보여주기. && 와 삼항 연산자, 로딩/비어있음/데이터 상태 나누기, 0이 새는 함정.

먼저 비유로

상황에 맞는 표지판을 걸어요

가게 문에 상황별로 다른 표지판을 걸어요. 준비 중이면 "잠시만요", 품절이면 "재고 없음", 정상이면 메뉴판. React도 똑같이 조건에 따라 다른 화면을 보여줘요. 도구는 두 가지예요. 둘 중 하나를 고르는 삼항 연산자(조건 ? 이것 : 저것), 참일 때만 보여주는 &&(조건 && 보여줄것).

특히 데이터를 불러오는 화면은 보통 로딩 / 비어있음 / 데이터 세 가지로 갈라줘야 사용자가 안 헷갈려요.

직접 해보기

세 가지 패턴 + 0 함정

상태 토글로 화면이 통째로 바뀌는 걸 보고, 로그인 스위치로 삼항을 확인하세요. 마지막 && 예제에서 count를 0으로 내리면 무슨 일이 나는지 꼭 보세요.

직접 만져보세요

1. 상태에 따라 화면 갈아끼우기

· 첫 번째 항목
· 두 번째 항목
· 세 번째 항목

2. 삼항 연산자 - {loggedIn ? "로그아웃" : "로그인"}

로그인 상태

3. && 의 함정 - count가 0이면?

{count && <뱃지/>}

알림 0

{count > 0 && <뱃지/>}

알림

count를 0으로 내려보세요. 왼쪽엔 숫자 0이 새어 나오죠? 0은 falsy지만 빈 게 아니라 "0"으로 그려져요. count > 0처럼 진짜 조건을 넘기면 깔끔해요.

count를 0으로 내려 왼쪽에 '0'이 새는 걸 확인하세요.

핵심은 이거예요

둘 중 하나면 삼항(조건 ? A : B), 참일 때만이면 &&를 써요. 단 && 앞엔 숫자가 아니라 진짜 조건(count > 0)을 두세요. 0이 화면에 새요.

흐름으로 보기

화면을 고르는 순서

1지금 상태(state)를 확인해요. 예: 로딩 중인가? 데이터가 비었나?
2가장 먼저 걸러야 할 상태부터 분기해요 (로딩 -> 비어있음 -> 데이터).
3둘 중 하나면 삼항, 있을 때만 보여줄 거면 &&로 표현해요.
4state가 바뀌면 다시 그려지며, 그때의 조건에 맞는 화면이 나와요.

코드로 보기

딱 이만큼이에요

function Box({ status, count }) {  // 상태별 분기 (삼항 또는 early return)  if (status === "loading") return <Spinner />;  if (status === "empty") return <Empty />;   return (    <div>      {/* 삼항: 둘 중 하나 */}      {loggedIn ? <Logout /> : <Login />}       {/* &&: 조건이 참일 때만. 단 count는 > 0 으로! (0이 새는 함정) */}      {count > 0 && <Badge>{count}</Badge>}    </div>  );}

early return으로 상태를 거르고, 삼항/&&로 세부 분기.

조심하세요

처음에 꼭 헷갈리는 것

{count && <Badge/>} 처럼 숫자를 && 앞에 두기. count가 0이면 화면에 0이 새어 나와요. count > 0 &&로 진짜 조건을 넘기세요.
삼항을 너무 깊게 중첩하기. 조건이 3개 이상이면 읽기 어려워요. early return으로 먼저 갈라주는 게 깔끔해요.
로딩/빈 상태를 빼먹기. 데이터만 생각하면, 불러오는 동안이나 결과가 0개일 때 빈 화면이 떠요. 세 갈래를 챙기세요.