[React] 조건부 렌더링 시 "falsy" 값 렌더링 주의

 

문제 

api로 배열 데이터를 받아와 화면에 뿌려주는 작업 중 화면에 0이 출력되어 찾아보았다.

 

 

원인

JSX 이해하기 – React

 

<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

한 가지 주의해야 할 점은 0과 같은 “falsy” 값들은 React가 렌더링 한다는 점입니다.
예를 들어, 아래의 예시는 props.messages가 빈 배열일 때 예상과는 다르게 0을 출력하게 됩니다.

props.messages.length가 0이면 "falsy" 값이 나오니 조건부 렌더링을 이용하면 되겠다! 라는 생각이지만

리액트는 그 값을 렌더링한다고 한다. 그래서 0이 출력하게 되었다.

 

“falsy” 값 : boolean 문맥에서 false로 평가되는 값

false	키워드 false
0	숫자 zero
-0	음수 zero
0n	Bigint. 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. 0n은 거짓 같은 값.
""	빈 string
null	null - 아무런 값도 없음
undefined	undefined- 원시값
NaN	NaN - 숫자가 아님

 

 

해결

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

&& 앞의 표현식이 언제나 진리값(true, false)이 되도록 만든다.