React에서 잘못된 랜더링 조건문을 작성하는 경우

React에서 인라인 조건문을 삼항식 대신에, && 연산자를 사용하여 표현하는 경우가 있다.

this.list.length ? <Count/> : null과 동일한 의미

위의 코드에서 의도 했던 동작은, 리스트의 길이가  0보다 클 때 Count를 반환하고, 0이면 아무것도 반환하지 않는 것이다. 하지만 실제 실행결과는 리스트의 길이가 0인 경우에, '0' 자체가 랜더링되게 된다.

분명 React에서는 일반적으로 거짓으로 취급되는 몇몇 값들이 반환될 경우에는, 랜더링을 하지 않는다. 그러나 숫자 0은 예외적으로 그대로 랜더링하게 된다. 그렇기 때문에, 위와 같은 코드를 사용해서는 안된다.

 

올바른 코드

위의 코드는  ' > 0 '을 추가하여 의도한 대로 코드가 동작될 수 있도록 하였다. 이처럼 &&연산자를 사용하여 인라인 랜더링 조건문을 작성할 때에는 앞의 조건식이 boolean을 반환하도록 하는 것이 좋다. (물론 null이나 undefined는 문제가 없다)

 

두 줄 요약

• 리액트에서는 0을 제외한 거짓으로 취급되는 값들을 랜더링하지 않는다.
• && 연산자 사용시 조건식이 boolean으로 빈환되도록 한다.