조건부 렌더링(Conditional Rendering)

• 조건이 참일 경우에만 렌더링
• 조건이 거짓일 경우 렌더링 자체를 하지 않음
• 간단한 조건식일 경우 사용

삼항연산자를 사용한 조건부 렌더링

import { useState } from 'react';
import './App.css';

function App() {
  // 조건부 렌더링용
  const [flg, setFlg] = useState(true);
  
  return (
    <>
      {/* 조건부 렌더링 */}
      <button type="button" onClick={() => {setFlg(!flg)}}>Flg</button>
      { flg ? <h1>조건부 렌더링</h1> : null }
    </>
  )

}

export default App;

&& 연산자를 사용한 조건부 렌더링

import { useState } from 'react';
import './App.css';

function App() {
  // 조건부 렌더링용
  const [flg, setFlg] = useState(true);
  
  return (
    <>
      {/* 조건부 렌더링 */}
      <button type="button" onClick={() => {setFlg(!flg)}}>Flg</button>
      { flg && <h1>조건부 렌더링</h1> }
    </>
  )

}

export default App;