조건부 렌더링

조건부 렌더링이란?

조건에 따라 렌더링을 가능하게, 또는 불가능하게 하는 방법.

여기서는 조건부 렌더링을 하는 방법을 위주로 소개한다.

엘리먼트 변수

javascript

if (isLoggedIn) {button = <LogoutButton onClick={handleLogoutClick} />}
else {button = <LogoutButton onClick={handleLoginClick} />}

return (
	<div>
		<Greeting isLoggedIn={isLoggedIn}/>{button}
	</div>
)

인라인 조건

조건문을 코드 안에 집어넣는다고 생각하면 된다.

javascript

// 인라인 if
{message.length > 0} && <h3>읽지 않은 메시지 : {message.length}개</h3>

javascript

// 인라인 if-else
{props.isLoggedIn ? '로그인' : '로그인하지 않음'}

컴포넌트 렌더링 막기

javascript

function Warning(props){
	if (!props.warning) {
		return null;
	}
	
	return (
		<div>경고!</div>
	)
}