리액트에선 null undefined boolean 이렇게 3가지 타입만 렌더링을 건너뛰는 점 기억

자바스크립트에서 0(혹은 -0 0n)은 6가지 falsy 값 중 하나다. && AND 논리 연산자는 첫번째 falsy 값을 찾아서 반환하고, falsy 값이 없으면(피연산자가 모두 true이면) 마지막 피연산자를 반환한다. (반대로 || OR 연산자는 첫 번째 truthy 값을 찾아 반환하고, truthy 값이 없으면 && 연산자처럼 마지막 피연산자를 반환한다)

0 && 'bit' // 0
-0 && 'bit' // -0
0n && 'bit' // 0n

React에서 조건부 렌더링 코드를 작성할 때 && 연산자를 자주 사용한다. 아래 예시에서 count 변수에 담긴 0은 falsy 값이므로 화면에 아무것도 출력하지 않는걸 기대했지만, 화면엔 0을 출력한다.

falsy && 표현식 은 falsy 값을 반환하고, React에선 falsy 값인 0을 그대로 화면에 출력하기 때문.

// 컴포넌트 본문
const count = 0;
return (
  <div>
     {count && <h1>Hello World</h1>}
  </div>
);

위 문제를 해결하려면 && 앞의(좌항) 표현식이 falsy 값이 아닌 boolean(true|false) 타입을 반환하도록 해야 한다. 리액트에서 && 좌항 표현식이 false이면(falsy 값이 아닌 boolean false인 점 주의) 해당 줄의 중괄호를 무시하고 건너뛴다.

// 컴포넌트 return 문
{count > 0 && <h1>Hello World</h1>} // 방법 1
{!!count && <h1>Hello World</h1>} // 방법 2
{Boolean(count) && <h1>Hello World</h1>} // 방법 3

또한, 리액트에선 null undefined boolean(false면 건너뛰고 true면 && 뒤의 표현식 출력) 타입에 대해서만 렌더링을 건너뛰는 점도 기억하자.

// 컴포넌트 return 문
{null && <h1>Hello World</h1>}
{undefined && <h1>Hello World</h1>}
{false && <h1>Hello World</h1>}

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> 참고로 리스트(배열)를 렌더링 할 때, 리스트가 [] 빈 배열이면 화면에 아무것도 출력하지 않는다.

</aside>

참고 자료

조건부 렌더링 - React

Solved: React Conditional Rendering Renders '0'