[JavaScript] 단락평가(Short Circuiting)

{selectedFriendInfo&&<PetThumbnail 
    uri={selectedFriendInfo.photoUris[0].thumbnailUri?selectedFriendInfo.photoUris[0].thumbnailUri:selectedFriendInfo.photoUris[0].uri}

    width={40}
    height={40}
    innerBorderWidth={2}
    outerBorderWidth={2}
/>}

제가 최근 회사에서 작업 중인 코드의 일부를 발췌해왔습니다.

PetThumbnail은 펫의 썸네일(프로핑 사진)을 보여주는 컴포넌트인데요, 

uri값에 이미지 주소 값을 넣어주면 사진을 표시해줍니다.

이 때 uri 값에서 서버에서 받아온 값에 썸네일 주소가 있으면 썸네일 주소를 표시해주고, 없으면 원본 이미지 주소를 표시해주는 코드를 작성했습니다.

작성해보니 코드가 너무 길어 알아보기 힘들었는데요, javascript의 단락평가란 개념을 이용해 아래와 같이 변경해보았습니다.

{selectedFriendInfo&&<PetThumbnail 
    uri={selectedFriendInfo.photoUris[0].thumbnailUri||selectedFriendInfo.photoUris[0].uri}

    width={40}
    height={40}
    innerBorderWidth={2}
    outerBorderWidth={2}
/>}

이렇듯 단락평가를 이용하면 삼항연산자를 이용해 유효성 검사를 하는 경우, 또는 if문 등의 조건문을 이용하는 코드를 짧게 바꿀 수 있습니다.