[React] falsy 값을 사용한 리액트 조건부 렌더링시 주의할 점

리액트에선 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 문
// && 좌항 표현식이 모두 false를 반환하므로 화면에 아무것도 출력하지 않는다
{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>}

 

💡 참고로 리스트(배열)를 렌더링 할 때, 리스트가 [] 빈 배열이면 화면에 아무것도 출력하지 않는다.

 

참고 자료

---

• 조건부 렌더링 - React
• Solved: React Conditional Rendering Renders '0'  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요