Skip to main content

조건부 렌더링

조건에 따라 페이지 렌더링​

  • 특정 조건에 따라 표현하고자 하는 페이지를 렌더링 작업
import "./App.css";
import React from "react";

function App() {
  let score = prompt("점수를 입력해주세요.");
  return <Grade score={parseInt(score)} />;
}

function Grade({ score }) {
  return score >= 70 ? <Success score={score} /> : <Fail />;
}

function Success(props) {
  return <h1>{props.score}점 입니다. 수강완료</h1>;
}

function Fail() {
  return <h1>재수강 해주세요.</h1>;
}

export default App;

image

note

prompt로 점수의 값을 받아 Grade Component에 score을 전달한다.
Grade Component에서 삼항연산자를 통해 호출할 Component를 결정한다.
score의 점수가 70점 이상 일경우, Success Component에 score점수를 전달한다.
70점 보다 낮을 경우에 Fail Component를 호출 후, App으로 반환하여 화면을 렌더링한다.

단락 회로 평가를 이용한 렌더링​

  • && , ||를 이용하여 Component 렌더링
true && <h1>안녕하세요</h1>; // <h1>안녕히가세요</h1>
false && <h1>안녕히가세요</h1>; // false
true || <p>Hello World</p>; // true
false || <p>Bye World</p>; // <p>Bye World</p>