조건부렌더링 && 숫자일때 주의할점

리액트로 작업시 props나 state에 따라 달라지는 컴포넌트를 반환하고 싶을 때 &&연산자를 이용한다.
가독성때문에 삼항연산자(a?b:c)보다는 &&연산자를 많이 사용하고있다.

문제 : 숫자 0이 반환

코드를 작성하다가 state에 따라 true false시 컴포넌트가 보여지는 유무로 많이 사용하고있었는데, 숫자가 있어야할때 0이 반환되는것이다..!

해결 (!==0 직관적으로표현)

숫자 0이 출력되는 이유는, &&연산자가 마지막으로 검사한 값이 0이기 때문이다.
0일 경우 출력하고싶지 않다면 !== 0을 꼭 써주어서 확실하게 0이면 출력을 안한다고 명시해야한다.

기존 (문제가 있던 컴포넌트)

{settlement.compensationFee && (
     <div className="tableRow">
     	<p>물품손·망실비용</p>
     	<p>{settlement.compensationContent}</p>
     	<p className="textAlignRight">
       		{settlement.compensationFee.toLocaleString()}
     	</p>
     </div>
)}

해결

{settlement.compensationFee !== 0 && ( // 숫자일땐 !==0 을 사용해 명시적으로 표현
     <div className="tableRow">
     	<p>물품손·망실비용</p>
     	<p>{settlement.compensationContent}</p>
     	<p className="textAlignRight">
       		{settlement.compensationFee.toLocaleString()}
     	</p>
     </div>
)}