조건부 렌더링 && 연산자 함정

count가 0일 때 화면에 0이 표시됩니다. 버그를 찾으세요:

JSX

function Notification({ count }) {
  return (
    <div>
      {count && <span>{count}개의 알림이 있습니다</span>}
    </div>
  );
}

답변

count가 0이면 && 연산자가 falsy 값 0 자체를 렌더링함 && 연산자는 JSX에서 사용할 수 없음 span 태그에 중괄호를 쓰면 안 됨 count를 props로 받으면 숫자가 아닌 문자열이 됨

로그인 후 제출하기