댓글이 0개일 때 화면에 0이 찍힌 이유

문제 발생

댓글이 있을 때만 목록을 보여 주려고 &&를 썼는데, 댓글이 0개인 글에서 화면에 숫자 0이 덩그러니 찍혔습니다.

{comments.length && <CommentList items={comments} />}

원인 분석

&&는 불리언을 돌려주는 연산자가 아닙니다. 왼쪽이 falsy면 왼쪽 값을 그대로 돌려줍니다. comments.length가 0이면 전체 식의 값도 0입니다.

여기서 갈리는 지점이 있습니다. React는 false, null, undefined를 렌더하지 않고 건너뜁니다. 하지만 0은 렌더할 수 있는 값이라 그대로 화면에 출력합니다. React 공식 문서도 이 점을 명시합니다 — 왼쪽이 0이면 전체 식이 0이 되고, React는 아무것도 렌더하지 않는 대신 기꺼이 0을 렌더합니다.

빈 문자열도 같은 부류입니다. {name && <p>{name}</p>}에서 name이 ""면 빈 문자열이 렌더되므로 눈에는 안 보이지만, 의도한 조건 분기는 아닙니다.

해결 방안

1. 왼쪽을 비교식으로 바꿔 불리언을 만듭니다. 공식 문서가 권하는 방식입니다.

{comments.length > 0 && <CommentList items={comments} />}

2. 삼항 연산자로 명시적으로 씁니다. 대체 화면이 있는 경우에는 이쪽이 더 읽기 좋습니다.

{comments.length > 0 ? <CommentList items={comments} /> : <EmptyState />}

3. Boolean()이나 !!는 최후에 씁니다. 동작은 하지만 "무엇이 0일 수 있는가"를 코드가 설명하지 못합니다. length > 0이 의도를 더 잘 드러냅니다.
4. 문자열도 같은 방식으로 확인합니다.

{name !== "" && <p>{name}</p>}

5. 린트로 잡을 수 있습니다. 조건부 렌더링의 왼쪽에 숫자·문자열이 오는 것을 금지하는 규칙을 켜 두면 리뷰에서 놓쳐도 걸립니다. 이 실수는 데이터가 0이 되는 순간에만 드러나서 테스트에서 빠지기 쉽습니다.

공식 문서

• React: 조건부 렌더링 — 논리 AND 연산자
• MDN: 논리 AND (&&)
• MDN: Falsy