리액트 조건부렌더링 정리

1. &&를 이용한 조건부 렌더링
2. 삼항 연산자를 이용한 조건부 렌더링
3. null 을 이용하여 특정 조건에서 컴퍼넌트 렌더링 하지 않기

1. &&를 이용한 조건부 렌더링

  A && B // A와 B가 둘다 true일때 true, 하나라도 false라면 false

  true && expression 은 항상 expression 으로 실행되고,
  false && expression 은 항상 false 로 실행된다.

JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있다. 그 안에 논리연산자 && 를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다.

  return (
    ...
      {unreadMessages.length > 0 &&                                        
        <h2>                                                               
          You have {unreadMessages.length} unread messages.                
        </h2>                                                              
      }
   ...

배열 unreadMessages의 길이가 0보다 크면

<h2> You have {unreadMessages.length} unread messages. </h2> 태그를 입력한다는 뜻이다.

2. 삼항 연산자를 이용한 조건부 렌더링

삼항 연산자
condition ? true : false

다음 예시에서는 배열 messages가 빈배열인지 아닌지에 따라 조건부로 렌더링 한다.

function Mailbox() {
  const messages = [];

 return (
    ...
      {
      messages.length > 0 ?  //빈배열이 아닌가??, condition
        <h2>메시지 {messages.length} 개</h2> :   
       
        <h2>nope!</h2>  
        // messages가 빈배열이 아닐땐 '메시지 ~개'를 출력하고 빈배열일땐 nope! 출력
      }
  ...
  );
}

위의 코드에서는 배열 messages가 빈배열이기 때문에 Nope! 이 출력된다.

3. null 을 이용하여 특정 조건에서 컴퍼넌트가 렌더링하는 것을 막기

if(props.text === 'Hello') { return null }

return (
<h2>{props.text}</h2>
)

어떤 조건이 나타났을 때 null 을 리턴하면 그 컴퍼넌트는 렌더링하지 않게 된다.

function AvoidHello(props) {
  if(props.text === 'Hello') { return null }  // 전달받는 props.text값이 'Hello' 라면 컴퍼넌트가 렌더링하지 않음

  return (
  <h2>{props.text}</h2> // 위의 조건문을 통과하면 전달받은 props.text 값 렌더링
  )
}

ReactDOM.render(
  <AvoidHello text = 'Hello' />, // props.text값으로 'Hello' 전달
  document.getElementById('root')
);

<AvoidHello /> 의 props.text에 'Hello' 가 전달되기 때문에 <AvoidHello />는 렌더링 하지 않는다.