1. && (AND 연산자) 활용
-조건 && 출력할 내용 형태로 사용
-조건이 true이면 && 오른쪽의 JSX가 렌더링됨
-조건이 false이면 아무것도 렌더링되지 않음
ex. <로그인 상태에 따라 버튼 보이기>
function Welcome({ isLoggedIn }) {
return (
<div>
<h1>안녕하세요!</h1>
{isLoggedIn && <button>로그아웃</button>}
</div>
);
}
<Welcome isLoggedIn={true} />
<Welcome isLoggedIn={false} />
-주의할 점!
&& 연산자는 false를 반환할 경우 아무것도 렌더링하지 않는다!
2. ? : (삼항 연산자) 활용
-조건 ? 참일 때 실행 : 거짓일 때 실행 형태로 사용
-if-else 문과 비슷하지만, JSX 안에서 바로 사용 가능
ex. <로그인 상태에 따라 다른 버튼>
function UserGreeting({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <button>로그아웃</button> : <button>로그인</button>}
</div>
);
}
3. if 문을 사용한 렌더링 (JSX 밖에서)
if 문은 JSX 내부에서는 직접 사용할 수 없음. 그렇지만 JSX 밖에서 조건을 처리한 후 JSX를 반환할 수 있다!
ex. <if 문을 사용한 로그인 메시지 변경 >
function Greeting({ isLoggedIn }) {
let message;
if (isLoggedIn) {
message = "환영합니다!";
} else {
message = "로그인해주세요.";
}
return <h1>{message}</h1>;
}
<Greeting isLoggedIn={true} />
<Greeting isLoggedIn={false} />
4. null을 활용한 렌더링 제어
컴포넌트를 렌더링하고 싶지 않을 때 null을 반환->화면에 보이지 않음
ex. <로그인되지 않으면 아무것도 표시하지 않기>
function Notification({ show }) {
if (!show) {
return null; // 아무것도 렌더링하지 않음
}
return <p>새로운 알림이 있습니다!</p>;
}
<Notification show={false} />
<Notification show={true} />