• 목록

✅ 조건부 렌더링에 &&만 쓰면 언젠가 터진다

falsy 값 출력 버그, 이 패턴으로 막자

보통 이렇게 조건부 렌더링을 한다:

{items.length && <ItemList items={items} />}

하지만 items.length가 0이면,
React는 0을 그대로 렌더링해버린다
→ 화면에 이상한 숫자 0이 뜨는 현상 발생

✅ 해결: 명확한 비교 또는 삼항 연산자 사용

{items.length > 0 && <ItemList items={items} />}
// 또는
{items.length ? <ItemList items={items} /> : null}

✔️ 조건부 렌더링엔 항상
falsy 값이 아닌 boolean 조건을 명확히 써야 한다.
버그는 사소한 실수에서 시작된다.