[React] 0(숫자) && <Component/>은 0을 렌더링한다.

&&을 이용한 조건부 렌더링

조건부 렌더링을 할 때 <pre>count && <Component /></pre> 와 같이 사용하는 경우가 있다.

 

이 때 <pre>count</pre>가 0이라면 boolean으로 판단되어 아무것도 렌더링되지 않는 것이 아니라, "0" 그 자체가 노출된다.

 

이유

이건 javascript의 조건문 처리 결과에 의함이다.

 

javascript는 && 연산자를 계산할 때 왼쪽에서 오른쪽으로 평가하며 처음 만나는 falsy한 값을 반환한다.

falsy한 값은 다음과 같다.

• false;
• null;
• NaN;
• 0;
• 빈 문자열 ("" or '' or ``);
• undefined.

 

0은 falsy한 값이기 때문에 <pre>0 && <Component</pre>의 결과로 0을 반환하게 되는 것이다.

 

&&에 대한 자세한 내용은 아래를 참고하자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Logical_AND

논리적 AND (&&) - JavaScript | MDN

 

해결

만약 count가 0일 때 아무것도 노출시키고 싶지 않다면,

<pre> count > 0 && <Component /> </pre> 와 같은 방법을 사용하자!