1.条件付きレンダリングとは?

特定の条件に基づいて異なる成果物をレンダリングすることを示します。

通常、3つの演算子を使用するか、AND演算子を使用します.
文が使用できない場合は、IIFE(関数表現をすぐに実行)を使用する必要があります.

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

1.3つの演算子を使用
->trueまたはfalseの場合、異なる結果値が表示されます.
内容変更が必要な場合に使用する!!

function Hello({ color, name, isSpecial }) {
  return (
    <div>
      { isSpecial ? <b>*</b> : null }
      안녕하세요 {name} 
    </div>
  );
}

2&&演算子の使用
->値を非表示または挿入する場合にのみ&&演算子を使用します.

function Hello({ color, name, isSpecial }) {
  return (
    <div>
      { isSpecial  && <b>*</b> }
      안녕하세요 {name}
    </div>
  );
}