💗Conditional Rendering

조건부 렌더링: 조건에 따라 렌더링이 달라지는 것

Truthy

(true는 아니지만 true로 여겨지는 값)

true
{} (empty object)
[] (empty array)
22 (number, not zero)
"0", "false", "hi" (string, not empty)

Falsy

(false는 아니지만 false라고 여겨지는 값)

false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

✍ Element Variables

Element를 변수처럼 저장해서 다루고 사용하는 것

function LoginControl(props){
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
  
  const handleLogoutClick = () =>{
    setIsLoggedIn(false);
  }
  
  //Element를 변수처럼 저장
  let button;
  if (isLoggediN) {
    button = <LogoutButton onClick={handleLogoutClick}/>;
  } else {
    button = <LogInButton onClick = {handleLoginClick}/>;
  }
  
  return (
    <div>
      <Greeting isLoggedIn = {isLoggedIn}/>
      {button} //Element를 사용
    </div>
   )
}

✍ Inline Condition

조건문을 코드 안에 집어 넣는 것

1. Inline If

If 문을 집어 넣는 것, &&연산자 사용

&&연산자: 양쪽에 나오는 것이 모두 true여야 결과가 tru가 됨

true && expression => expresion
false && expression => false

첫번째 (앞부분)이 true 이면 두번째 조건문 (expression)을 평가하고,
첫번째 (앞부분)이 false이면 expression 자체를 평가하지 않음!
true -> expression의 평가 결과값이 결과
false -> flase expression의 결괏값

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  
  return(
    <div>
      <h1>안녕하세요!</hi>
      {unreadMessages.length > 0 &&
        <h2> 
          현재 {unreadMessages.legnth}개 읽지 않은 메세지가 있습니다.
        </h2>
        }
      </div>
    );
}

2. Inline if-else

? 연산자를 사용

?연산자: Contion ? true : false

조건문이 true이면 앞부분을 출력
조건문이 false이면 뒷부분을 출력

//예제 1
function UserStatus(props){
  return(
    <div>
      이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인되지 않은'}</b> 상태입니다
    </div>
  );
}

//예제 2
function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }
  
  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }
  
  return ( 
    <div>
      <Gretting isLoggedIn= {isLoggedIn}/>
      {isLoggedIn
      	? <LogoutButton onClick = {handleLogoutClick}/>
        : <LogInButton onClick = {handleLogInClick}/>
      }
   </div>
  );
}

✍ Component 렌더링 막기

null을 return 하면 됨!

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

//null을 return하는 함수 사용
function MainPage(props) {
  const [showWarning, setShowWarning] =useState(false);
  
  const hadleToggleClick = () => {
    setShowWarning(prevShowWarning => !prevShowWarning);
  }
  
  return (
    <div>
      <WarningBanner warning={showWarning}/>
      <button onClick={handleToggleClick}>
        {showWarning ? '감추기' : '보이기'}
      </button>
    </div>
  )
}