[Typescript React] 조건부 렌더링

---

조건부 렌더링

이미 이전 포스트에서 조건부 렌더링에 대한 대부분의 이야기를 마쳤습니다.

이 포스트는 조건부 렌더링에 대해 이야기한 부분만 모아놓은 글입니다.

1.

대문자로 시작하는 변수에 컴포넌트를 담는 테크닉을 응용하면 

동적으로 컴포넌트를 결정할 수 있습니다.

import React from "react";

class LogoutPannel extends React.Component {}
class LoginPannel extends React.Component {}

let isLogin: boolean = false;
let Pannel = isLogin ? LogoutPannel : LoginPannel;
let element = <Pannel />;

2.

true, false, undefined, true는 JSX 안에서 유효한 값이지만, 단순히 렌더링되지 않습니다.

아래의 JSX 표현식은 모두 동일하게 렌더링됩니다.

<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>

3.

자바스크립트에서 false && expr 표현식은 false로 평가되고, true && expr 표현식은 expr로 평가됩니다.

이러한 특성을 이용하면, 메시지가 존재할 때 알람을 띄울 수 있습니다.

메시지가 없다면 아무런 요소도 렌더링 하지 않습니다.

<div>
  {messages.length > 0 && <Alert /> }
</div>

단, 0 && expr 표현식을 주의하세요. 

위에서 설명한 규칙에 의해 0으로 평가되는데,

리액트는 0을 숫자로 인식하기 때문에 정상적으로 렌더링합니다.

즉, 아래 컴포넌트는 메시지가 없다면 0을 페이지에 넣어버립니다.

<div>
  {messages.length && <Alert /> }
</div>

---

생명주기

아래의 예제는 메시지가 없다면 아무런 요소도 렌더링 하지 않습니다.

정확히는 null로 평가됩니다.

<div>
  {messages.length > 0 && <Alert /> }
</div>

만약 render 함수가 위의 문법을 반환한다면,

메세지가 없어 null을 반환하는 경우가 생깁니다.

생명주기에서 다뤘던 것 같이 render 함수가 null을 반환하면,

componenetWillUpdate와 componenetDidUdpate 외의 라이프사이클 메서드는 동작하지 않습니다.