[React] && 연산자로 If문 처럼 표현하기

  

 

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

function GetUnreadTextInfo(props) {
  const unreadTexts = props.unreadTexts; // ['react', 'test', 'hello']
  return (
    <div>
        <h1>Hello!</h1>
        {unreadTexts.length > 0 && // unreadTexts.length = 3
          <h2>
            You have {unreadTexts.length} unread texts that are {unreadTexts.join(', ')}
          </h2>
        }
    </div>
  );
}

const textZip = [ 'react', 'test', 'hello']

ReactDOM.render(
    <GetUnreadTextInfo unreadTexts={textZip}/>,
    document.getElementById('root')
);

 

JavaScript에서 true && expression은 항상 expression으로 평가되고, false && expression은 항상 false로 평가됩니다. 따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시합니다.

 

false로 평가될 수 있는 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만 false로 평가될 수 있는 표현식이 반환된다는 것에 주의해주세요. 아래 예시를 통해 주의해야되는 이유를 알아보겠습니다.

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>} // 0
    </div>
  );
}

 

위의 예시에서, count = 0 이므로 false로 표현식은 건너뛰지만 count에 0이 반환됩니다. 즉, 아래와 같은 결과가 render 메서드에서 반환되므로 주의하셔서 사용하셔야 합니다. 

<div>0</div>

 

 

 

References

React.org - 조건부 렌더링