조건문

• 특정 조건에 따라 다른 UI를 렌더링 하거나 다른 로직을 실행하기 위해 사용
• JSX 내부에는 중괄호 { } 안에 조건문을 사용

if - else 문

기본 구조

if (조건) {
    // 조건이 true일 때 실행
} else {
    // 조건이 false일 때 실행
}

예시

function Greeting({isLoggedIn}) {
	if (isLoggedIn) {
		return <h1>환영합니다.</h1>
	}else{
		return <h1>로그인해주세요.</h1>
	}
}

삼항연산자

기본 구조

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

예시

function Greeting({isLoggedIn}) {
	return (
		<div>
			{isLoggedIn ? <h1>환영합니다.</h1> : <h1>로그인해 주세요.</h1>}
		</div>
	);
}

Switch문

기본 구조

switch(값) {
    case 값1:
        // 값1일 때 실행
        break;
    case 값2:
        // 값2일 때 실행
        break;
    default:
        // 어느 case도 아닐 때 실행
}

예시

function StatusBadge({ status }) {
    switch(status) {
        case 'pending':
            return <span>대기중</span>;
        case 'approved':
            return <span>승인됨</span>;
        case 'rejected':
            return <span>거절됨</span>;
        default:
            return <span>알 수 없음</span>;
    }
}