삼항연산자보다 더 간결하게 쓰기(논리연산자, nullish 널 병합연산자 `??`)

image src에 previewImgUrl 값이
있으면 previewImgUrl
없으면 '/images/common/noImage.png'을

반환하게 일반적으로는 삼항연사자를 사용한다.

<Image src={previewImgUrl ? previewImgUrl : '/images/common/noImage.png'} />

근데 previewImgUrl가 중복되니 좀 더 간결하게 쓰고싶어진다.

논리연산자 ||

<Image src={previewImgUrl || '/images/common/noImage.png'} />

||는 previewImgUrl이 null, undefined, false, 0, ''(빈 문자열)일 때 기본 값을 적용한다.

const previewImgUrl = ''; // 빈 문자열
<Image src={previewImgUrl || '/images/common/noImage.png'} />
// 실제 src: '/images/common/noImage.png'

빈 문자열이 기본 값으로 대체된다.
빈 문자열이 falsy하기때문에 유효한 값일때는 ??을 사용

nullish coalescing 연산자 ??

<Image src={previewImgUrl ?? '/images/common/noImage.png'} />

??는 previewImgUrl이 null 또는 undefined인 경우에만 기본 값을 적용하며, 다른 falsy 값 (false, 0, '')은 허용한다.

 

그러나 이미지 src에는 비적합하다. 

const previewImgUrl = ''; // 빈 문자열
<Image src={previewImgUrl ?? '/images/common/noImage.png'} />
// 실제 src: ''

왜냐면 ''이 그대로 유지되므로, 기본 이미지가 적용되지 않을 수 있음.

선택 기준

||와 ??는 비슷한 역할을 하지만, 특정 상황에서 다르게 작동할 수 있으니 주의해야한다.

• ||: null, undefined, 또는 다른 falsy 값(null, undefined, false, 0, ''(빈 문자열))도 기본 이미지로 처리하고 싶을 때
  • 이미지 URL 같은 경우: 기본적으로 빈 문자열이나 null/undefined는 잘못된 값으로 처리될 가능성이 크므로, ||를 사용하는 것이 일반적
• ??: null과 undefined만 기본 이미지로 처리하고 나머지 falsy 값은 유효한 값으로 간주할 때.
  • 정수 값, 플래그 같은 경우: 0이나 false도 유효한 값이라면 ??를 사용

 

데이터의 특성에 따라 선택해야된다!