블로그 내용은
Programming with Mosh React Tutorial for Beginners [React js]
을 공부하는 과정에서 작성되었습니다.

Conditional Rendering

import React, { Component, Fragment } from 'react';

class Counter extends Component {
    state = {
        count : 0,  
        tags: []     
    };
    rendorTags() {
        if(this.state.tags.length === 0) return <p>There are no tags!</p>;
        return <ul>{this.state.tags.map(tag => <li key ={tag}>{tag}</li>)}</ul>;
    }
    render() {      
        return (
            <div>
                {this.state.tags.length === 0 && "Please create a new tag!"}
                {this.rendorTags()}
            </div>

        );
        
    }
}
export default Counter;

자바스크립트에서 조건연산자가 아닌 조건문 && ||은
다음과 같이 사용합니다.

true && expression은 항상 expression으로
false && expression은 항상 false로 평가됩니다.

let a = true
console.log(a && "true일때만")
// true일때만

let a = false
console.log(a && "true일때만")
// false

true || expression은 항상 true로
false || expression은 항상 expression으로 평가됩니다.

let a = false
console.log(a || "false일때만")
// false일때만

let a = true
console.log(a || "false일때만")
// true     //값이 있음으로

이것은 자바스크립트의 고유한 엔진과 연관이 있는데
A && B에서 A가 ture이면 뒤에 B를 판단하고
A가 false라면 거기서 끝내고 B를 고려하지 않습니다.

A || B에서는 A가 true이면 거기서 끝내고 B를 고려하지 않습니다. A가 false이면 뒤에 B를 고려합니다.

여기서 자바스크립트 엔진은 두번째 인자를 리턴하기 때문에 위와 같이 결과가 나옵니다.

참고자료
https://ko.reactjs.org/docs/react-component.html

https://www.youtube.com/watch?v=Ke90Tje7VS0&t=916s