조건부 렌더링

조건부 렌더링

기본 if

function Greeting(props){
	const isLoggedIn = props.isLoggedIn;
    
    if(isLoggedIn){
    	return <UserGreeting />;
    }else {
    	return null;
    }
    
}

논리 && 연산자로 if를 인라인으로 표현하기

function Mailbox(props){
	const unreadMessages = props.unreadMessages;
    
    return(
    	<div>
        	{unreadMessages.length > 0 && 
            	<h2>You have {unreadMessages.length} unread messages.</h2>
        </div>
    );
}

&& 뒤의 엘리먼트는 조건이 true 일때 출력, 조건이 false라면 React는 무시합니다.

false로 평가될 수 있는 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만 false로 평가될 수 있는 표현식이 반환된다는 것에 주의 아래 예제는

이 render 메서드에서 반환됩니다.

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

아래 코드는 count가 true인 경우 count false인 경우 0을 출력

{count > 0 ? count : 0}

컴포넌트가 렌더링하는 것을 막기

return null; 을 사용하면 렌더링을 막는다.