오늘 알아볼 것
조건부 렌더링을 통해서 원하는 컴포넌트만 렌더링하여 재사용성을 높힐 수 있다.
하나의 모달 컴포넌트에서 조건에 따라 다른 컨텐츠 내용을 출력
return (
<>
{!마지막라운드인지 ? (
<>
<DIV>
<p>{버튼을누른거 ? "중간 결과" : "라운드 결과"}</p>
{버튼을누른거 ? (
<중간결과 컴포넌트 />
) : (
<라운드결과 컴포넌트>
{~~내용~~}
</라운드결과 컴포넌트>
)}
</DIV>
<Content> hi~ </Content>
</>
) : (
<DIV>
<p>최종결과</p>
<최종결과 컴포넌트 />
</DIV>
)}
<Content>{마지막라운드인지 ? "게임이 종료 되었습니다!" : ""}</Content>
</>
);
<span style = {{display : 조건 ? "display":"none" }}> Content </span>
if (!조건) {
return null;
}