1. Conditin Rendering

= 조건부 렌더링

: 어떠한 조건(조건문)에 따라서 렌더링이 달라지는 것

<aside> 🪄 Javascript의 Truthy / Falsy

</aside>

• truthy: true는 아니지만, true처럼 여겨지는 값
• falsy: false는 아니지만, false로 여겨지는 값

// truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "false" (string, not empty)

// falsy
false
0, -0 (zero, minus zero)
0n (Biginit zero)
'', "", `` (empty string)
null
undefined
NaN

Element Variables

: 리액트 element를 변수처럼 다룸

function LoginControl(props) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  }

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  }

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

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

2. Inline conditions

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

• 효과 : Element Variables를 좀 더 간결하게 작성할 수 있게 해줌

1) inline if

: 실제로 if문을 사용하는 것이 아니라 && 연산자를 사용