React Study 004

조건부 랜더링

MainHeader.js

import React from "react";

function MainHeader( {text} ) {
  return <h1>{text}</h1>
}

export default MainHeader;

App.js

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

function App() {
  const [text, setText] = useState("Hide");

  const buttonClick = () => {
    text === "Hide" ? setText("Show") : setText("Hide");
  };
  return (
    <div className="App">
      <h1>무공화꽃이 피었습니다.</h1>
      {text === "Show" && <MainHeader text="255번 나와"></MainHeader>}
      <button onClick={buttonClick}>{text}</button>
    </div>
  )
}

export default App;

• useState를 활용하여 조건문 대체. 조건에 충족할 경우 MainHeader 랜더링
• &&는 if문 if(text==="Show") {return ~~ }과 동일
• return 내부가 조건부 rendering으로 복잡할 경우 삼항연산자를 별도의 변수를 선언하여 return 외부로 빼 코드를 깔끔하게 할 수 있음