JavaScript의 ??는 nullish coalescing operator입니다. 왼쪽 값이 null이나 undefined일 때만 오른쪽 값을 선택합니다.

const name = null;
console.log(name ?? '명');   // 익명

const age = undefined;
console.log(age ?? 0);         // 0

const score = 0;
console.log(score ?? 100);     // 0

반면 ||는 0, '', false, NaN 같은 모든 falsy 값도 "값이 없음"으로 봅니다.

const price = 0;
console.log(price || 100);    // 100
console.log(price ?? 100);    // 0

const label = '';
console.log(label || '미지정'); // 미지정
console.log(label ?? '미지정'); // ''

React 컴포넌트에서는 prop이 전달되지 않아 undefined인 경우에만 기본값을 보여주고 싶을 때 ??가 적절합니다.

function ProductCard({ title, stock }) {
  return (
    <div>
      <h2>{title ?? '기본 상품'}</h2>
      <p>재고: {stock ?? 0}</p>
    </div>
  );
}

이 외에 React에서 자주 쓰는 조부 렌더링 방식은 다음과 같습니다.

1. &&: 조건이 참일 때만 더링

조건이 만족될 때만 요소를 보여줍니다.

{isReady && <button>시작</button>}

숫자가 조건에 들어갈 경우 주의해야 합니다. 0은 React가 더링 가능한 값으로 인식해 화면에 노출 수 있습니다.

{count > 0 && <span>{count}개</span>}

2. ?:: 두 가지 UI 중 하나 선택

명확한 if-else 형태입니다.

{user ? <UserProfile user={user} /> : <LoginButton />}

3. ||: falsy면 기본값 사용

빈 문자열이나 0도 기본값으로 대체해야 할 때 사용합니다.

{description || '설명이 없습니다.'}

4. ??: null/undefined일 때만 기본값 사용

0, false, '' 같은 값은 의도된 데이터로 보합니다.

{count ?? 0}

실제 컴포넌트에서는 이렇게 조합할 수 있습니다.

function Dashboard({ user, status, score, notice }) {
  return (
    <section>
      {status === 'loading' && <p>데이터를 불러오는 중...</p>}
      {user ? <h1>{user.name} 환영합니다</h1> : <h1>로그인이 필요합니다</h1>}
      <p>점수: {score ?? 0}</p>
      <div>{notice || '공지사항이 없습니다.'}</div>
    </section>
  );
}

선택 기준은 다음과 같습니다.

• &&: 조건이 참일 때만 표시
• ?:: 두 개의 UI 중 하나를 표시
• ||: 모든 falsy 값을 기본값 신호로 볼 때
• ??: null이나 undefined일 때만 기본값으로 대체