조건부 렌더링

https://ko.reactjs.org/docs/conditional-rendering.html를 읽고 정리한 글입니다

 

• 조건부 렌더링은 JavaScript의 조건 처리처럼 동작
• 인라인으로 표현하기 ⇒ 조건이 너무 복잡하다면 컴포넌트를 분리하기

// 방법 1
{isLoggedIn && <LogoutButton />}

// 방법 2
{isLoggedIn ? <LogoutButton /> : <></>}

• 렌더링 과정에서 컴포넌트 자체를 숨기고 싶을 때, 렌더링 결과 대신 null을 반환하기
• falsy 표현식을 반환하면 && 뒤의 표현식은 건너뛰지만 falsy 표현식이 반환
  • falsy 표현식 : boolean에서 false로 평가되는 값
    • false, 0, -0, 0n, "", null, undefined, NaN