삼항 연산자 — 조건을 한 줄로

이 토픽을 마치면

삼항 연산자의 구조를 이해하고, if/else를 한 줄로 바꿀 수 있으며, 어떤 상황에서 삼항이 적절하고 어떤 상황에서 읽기 어려워지는지 판단할 수 있습니다.

if문 4줄을 1줄로

"성인이면 입장, 아니면 차단" 같은 단순 분기를 if/else로 쓰면:

javascript

let message;
if (age >= 18) {
  message = "입장 가능";
} else {
  message = "미성년자 접근 불가";
}

삼항 연산자로 바꾸면 한 줄입니다:

javascript

const message = age >= 18 ? "입장 가능" : "미성년자 접근 불가";

구조: 조건 ? 참일 때 값 : 거짓일 때 값

핵심은 삼항 연산자가 값을 반환한다는 점입니다. if는 문(statement)이라 값을 반환하지 않지만, 삼항은 식(expression)이라 변수에 바로 담을 수 있습니다.

기본 패턴

javascript

// 패턴 1: 변수 할당
const status = score >= 60 ? "합격" : "불합격";

// 패턴 2: 함수 인자
console.log(isLoggedIn ? "환영합니다" : "로그인하세요");

// 패턴 3: 템플릿 리터럴 내부
const greeting = `${hour < 12 ? "오전" : "오후"} ${hour % 12}시입니다`;

공통점: "두 값 중 하나를 골라야 하는" 상황에서, 그 선택 자체가 한 줄로 끝날 때 삼항이 자연스럽습니다.

React/JSX에서의 삼항

React에서 삼항 연산자는 거의 필수입니다. JSX 안에서는 if문을 쓸 수 없기 때문입니다:

jsx

function UserGreeting({ isLoggedIn, name }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>{name}님, 환영합니다</h1>
      ) : (
        <button>로그인</button>
      )}
    </div>
  );
}

JSX의 중괄호 {} 안에는 **식(expression)**만 들어갈 수 있습니다. if/else는 문(statement)이라 넣을 수 없고, 삼항 연산자가 유일한 인라인 조건 분기 수단입니다.

중첩 삼항 — 유혹과 함정

두 번 이상 분기할 때 삼항을 중첩하고 싶은 유혹이 옵니다:

javascript

// ❌ 읽기 어려움
const label = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

이 코드는 작동하지만, 6개월 뒤에 읽으면 해석에 시간이 걸립니다. 중첩 삼항은 들여쓰기를 해도 가독성이 나쁩니다.

대안 1 — if/else:

javascript

// ✅ 명확
let label;
if (score >= 90) label = "A";
else if (score >= 80) label = "B";
else if (score >= 70) label = "C";
else label = "F";

대안 2 — 객체 매핑이나 함수 추출:

javascript

function getGrade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  return "F";
}
const label = getGrade(score);

삼항 vs &&(논리 AND)

React에서 "조건이 참이면 렌더링, 거짓이면 아무것도 안 함"인 경우:

jsx

// 삼항 — null을 명시적으로 반환
{isAdmin ? <AdminPanel /> : null}

// && 연산자 — 더 간결
{isAdmin && <AdminPanel />}

&&는 거짓일 때 렌더링할 것이 없을 때 삼항보다 깔끔합니다. 단, 주의점이 있습니다:

jsx

// ⚠️ 위험: count가 0이면 화면에 "0"이 렌더링됨
{count && <ItemList />}

// ✅ 안전: 명시적으로 불리언 변환
{count > 0 && <ItemList />}

0은 falsy이지만 React가 숫자 0을 화면에 렌더링합니다. && 왼쪽이 숫자일 때는 비교 연산자를 써서 불리언으로 만들어야 합니다.

Nullish Coalescing (??) 과의 차이

javascript

// 삼항: 조건에 따라 두 값 중 선택
const display = value !== null ? value : "기본값";

// ?? : null 또는 undefined일 때만 대체
const display = value ?? "기본값";

??는 null과 undefined만 걸러냅니다. 0, "", false 같은 falsy 값은 그대로 통과시킵니다. 삼항 연산자는 아무 조건이나 쓸 수 있으므로 범용적이고, ??는 "값이 없을 때 기본값"이라는 좁은 용도에 특화되어 있습니다.

판단 기준

상황	추천
두 값 중 하나를 골라 할당	✅ 삼항
JSX 인라인 조건부 렌더링	✅ 삼항 or &&
3단 이상 분기	❌ if/else 또는 함수 추출
부수 효과(API 호출 등) 포함	❌ if/else
null/undefined 대체만	❌ ?? 연산자

삼항 연산자는 "두 선택지, 한 줄, 값 반환"이 전부 맞을 때 씁니다. 하나라도 안 맞으면 if/else가 낫습니다.

핵심 한 줄: 삼항 연산자는 조건 ? A : B — 두 값 중 하나를 고르는 식(expression)입니다. 중첩하면 읽기 어려우니 분기가 늘면 if/else로 돌아가세요.