React JSX에서의 0 처리 특징

문제 배경

디버깅 화면

초기 컴포넌트 로딩중에 원하지 않는 0이 출력되었습니다.

 

원인 파악

이미지를 불러오는 초기 과정에서 발생하기 때문에 디버거를 사용하여

원하는 시점에 코드를 멈춰두고

 <button>이전</button>
      {totalThumbnailsNumber && (
        <button
          className="absolute top-4 py-2 pl-6 z-10 bg-black/60 bg-opacity-50 cursor-pointer hover:bg-black/80 focus:bg-black/80 text-3xl text-white p-2 rounded-r hover:bg-opacity-70 control-visibility"
          onClick={() => setIsExpanded(!isExpanded)}
          aria-label="썸네일 보기"
          aria-expanded={isExpanded}
          aria-controls="thumbnails-panel"
          tabIndex={0}
        >
          <PiImages aria-hidden="true" />
        </button>
      )}
   <button>다음</button>

이전 다음과 같이 구간을 탐색할 수 있는 요소로 

원인이 되는 코드를 특정하여 분석하였습니다.

분석 결과  빈 배열의 length 값으로 0이 들어오는데

기존의 javascript에서는 falsy값이어서 false로 처리되지만 

React JSX에서는 아래와 같이 다른 동작을 하여 

원치 않은 동작이 나온 것이었습니다.

React JSX에서의 0 처리 특징

JavaScript에서 0은 일반적으로 "falsy" 값이 맞습니다. 하지만 React의 JSX에서는 조금 다르게 동작합니다.

JavaScript vs React JSX

JavaScript에서의 0

// JavaScript에서 0은 falsy입니다
if (0) {
  console.log("실행되지 않음");
} else {
  console.log("0은 false입니다"); // 이게 출력됨
}

// 논리 연산자에서도 falsy로 동작
console.log(0 && "something"); // 0 출력

React JSX에서의 0

// React JSX에서는 0도 렌더링 됩니다!
return (
  <div>
    {0} {/* "0"이 화면에 출력됨 */}
    {0 && <button>버튼</button>} {/* "0"이 화면에 출력됨 */}
    {false && <button>버튼</button>} {/* 아무것도 출력되지 않음 */}
    {null && <button>버튼</button>} {/* 아무것도 출력되지 않음 */}
    {undefined && <button>버튼</button>} {/* 아무것도 출력되지 않음 */}
  </div>
);

왜 이렇게 동작하나요?

React JSX에서는 렌더링 가능한 모든 값을 화면에 표시하려고 시도합니다:

• false, null, undefined는 아무것도 렌더링하지 않습니다
• 하지만 0은 유효한 숫자이므로 문자열로 변환되어 렌더링됩니다

해결 방법

1. 명시적인 비교 사용

{totalThumbnailsNumber > 0 && (
  <button>썸네일 보기</button>
)}

2. Boolean으로 변환

{!!totalThumbnailsNumber && (
  <button>썸네일 보기</button>
)}

3. 삼항 연산자 사용

{totalThumbnailsNumber > 0 ? (
  <button>썸네일 보기</button>
) : null}

 

위 세 개의 방법을 추천 받았습니다

그 중에 2번째 방법을 채택하여