[React]조건적 Content 렌더링하는 방법들( 삼항연산자, AND(&&), 변수 등)

1. 

function App() {
  const [selectedItem, setSelectedItem] = useState('');
  ...
  return (
    ...
    {!selectedItem ? <p>아이템을 선택해주세요</p> : null}
    {selectedItem ? <p>아이템이 선택되었습니다</p> :null}
    ...
  )
}

2.

function App() {
  const [selectedItem, setSelectedItem] = useState('');
  ...
  return (
    ...
    {!selectedItem ? (
       <p>아이템을 선택해주세요</p>}
    ) : (
       <p>아이템이 선택되었습니다</p>
    )
    ...
  )
}

3.  AND 연산자 사용

function App() {
  const [selectedItem, setSelectedItem] = useState('');
  ...
  return (
    ...
    {!selectedItem && <p>아이템을 선택해주세요</p>}
    {selectedItem && <p>아이템이 선택되었습니다</p>
    ...
  )
}

4. 변수 사용
 

function App() {
  const [selectedItem, setSelectedItem] = useState('');
  
  let tabContent = <p>아이템을 선택해주세요</p>;
  if (selectedItem) {
    <p>아이템이 선택되었습니다</p>
  }
  ...
  return (
    ...
    {tabContent}
    ...
  )
}