[Kossie Coder] 조건에 따라 컨텐츠 다르게 보여주기 - 조건 렌더링

// App.js

import React, { useState, useEffect } from 'react';
import './index.css';
function App() {
  const [condition, setCondition] = useState(false);
  const toggle = () => setCondition(!condition);
  useEffect(() => {
    console.log('condition :>> ', condition);
  }, [condition]);
  const renderCondition = condition ? 'True' : 'False';

  return (
    <div className="App">
      <h1>Lami</h1>
      <div>{renderCondition}</div>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

export default App;

 

Toggle 버튼 클릭 시

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */