React, React Native falsy value rendering

값	React	React Native	T/F	비고
`true`	렌더링 X	렌더링 X	Truthy
`false`	렌더링 X	렌더링 X	Falsy
`number`	렌더링 O	렌더링 O	Truthy	RN은 `<Text>` 내부에서만 가능
`0`	렌더링 O	오류 발생 가능	Falsy	RN은 `<Text>` 내부에서만 가능
`string`	렌더링 O	렌더링 O	Truthy	RN은 `<Text>` 내부에서만 가능
`""`	렌더링 O	렌더링 X	Falsy
`[1,2]`	렌더링 O	렌더링 O	Truthy	RN은 `<Text>` 내부에서만 가능
`[]`	렌더링 X	렌더링 X	Truthy	RN은 `<Text>` 내부에서만 가능
`null`	렌더링 X	렌더링 X	Falsy
`undefined`	렌더링 X	렌더링 X	Falsy
`NaN`	렌더링 O	오류 발생 가능	Falsy	RN은 `<Text>` 내부에서만 가능
`object`	오류	오류	Falsy	JSX에서 객체 직접 렌더링 불가

React에서 안전한 렌더링

0이 있을 수 있다면 Boolean Type Casting

import { useState } from "react";
 
export const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <>
      {/* 🚫 0이 렌더링됩니다. */}
      {count && "보여줄 글자"}
 
      {/* ⚠️  Boolean으로 Type Casting한다는 의도가 명확하게 드러나지 않을 수 있습니다. */}
      {!!count && "보여줄 글자"}
 
      {/* ✅ Good. */}
      {Boolean(count) && "보여줄 글자"}
    </>
  );
};

React Native에서 안전한 렌더링

0, NaN이 있을 수 있다면 Boolean Type Casting

import { useState } from "react";
 
export const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <View>
      {/* 🚫 NaN을 렌더링할 수 없어 에러가 발생합니다.  */}
      {NaN}
 
      {/* 🚫 0을 렌더링할 수 없어 에러가 발생합니다.  */}
      {count && <Text>보여줄 글자</Text>}
 
      {/* 🚫 Text 태그로 감싸야 합니다.  */}
      {!count && "보여줄 글자"}
 
      {/* ⚠️ Boolean으로 Type Casting한다는 의도가 명확하게 드러나지 않을 수 있습니다. */}
      <View>{!!count && "보여줄 글자"}</View>
 
      {/* ✅ Good. */}
      <View>{Boolean(count) && "보여줄 글자"}</View>
    </View>
  );
};

PR reminder bot Chrome devtools - Rendering