6. 조건부 렌더링

 

Conditional Rendering

 Conditional Rendering (조건부 렌더링)은 조건에 따라 렌더링의 결과 달라지도록 하는 것이다.

• Truthy : true는 아니지만 true로 여겨지는 값   ex) true, {}, [], 42(number), "0" (String), "false" (String)
• Falsy : false는 아니지만 false로 여겨지는 값   ex) false, 0,-0, ' ', " ", null, undefined, NaN

 

Inline Conditions

 코드를 별도로 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 집어 넣는 것이다.

 

  cf) && (logical and 연산)

• true && expression -> expression
• false && expression -> false

//예시
//unreadMessages.length>0이 참이어야 다음 메시지 출력

unreadMessages.length >0 &&
  <h2>
     현재 {unreadMessages.length}개의 읽지 않은 메시지가 있습니다.
  </h2>

 

 

cf) null

   -> null을 리턴하면 컴포넌트가 렌더링 되지 않는다.