[React] 조건값에 따른 렌더링

매우 자주 사용하는 방법인 && 연산자이다. 

 

ex) && 연산자 예제

function Greeting({ isLogin, name, cash }) {

  return (

    <div>

      저희 사이트에 방문해 주셔서 감사합니다.

      {isLogin && (

        <div>

          <p>{name} 님 안녕하세요.</p>

        </div>

      )}

      {!isLogin && cache <= 10000 && (

        <div>

          <p>{name} 님 안녕하세요.</p>

          <p>현재 보유하신 금액은 {cash}원 입니다.</p>

        </div>

      )}

    </div>

  );

}

 

 

ex) null, undefined 가 아닐 경우에만 수행되도록 하는 법

<div>
  {cach != null && <p>{cash}원 보유중</p>}
  {memo != null && <p>{200 - memo.length} 자 입력가능</p>}
</div>